{"id":15169,"library":"rc-segmented","title":"React Segmented Controls","description":"rc-segmented is a foundational React component for building highly customizable segmented controls, extensively utilized within the Ant Design ecosystem. It presents choices as a group of buttons where typically only one can be active at a time, akin to a radio group. The component supports various data types for options (strings, numbers, or objects), robust `onChange` event handling, and manages selection state. Currently stable at version `2.7.1`, the package maintains a moderate release cadence, focusing on bug fixes, performance enhancements, and crucial accessibility improvements. While `rc-segmented` is the primary package, a newer scoped version, `@rc-component/segmented`, sometimes receives parallel updates, which can be a point of confusion for developers. Key differentiators include its deep integration with Ant Design's principles, a strong emphasis on accessibility, and a clear, functional API for managing segmented choices efficiently within React applications.","status":"active","version":"2.7.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/segmented","tags":["javascript","react","react-component","react-segmented","react-segmented-controls","segmented controls","antd","ant-design","typescript"],"install":[{"cmd":"npm install rc-segmented","lang":"bash","label":"npm"},{"cmd":"yarn add rc-segmented","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-segmented","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for any React component.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"The main Segmented component is a default export. Ensure you import it without curly braces.","wrong":"import { Segmented } from 'rc-segmented';","symbol":"Segmented","correct":"import Segmented from 'rc-segmented';"},{"note":"Component styles are provided via a separate CSS file. Ensure your build system handles CSS imports. A Less version (`index.less`) is also available but requires a Less preprocessor.","wrong":"import 'rc-segmented/index.css';","symbol":"Styles","correct":"import 'rc-segmented/assets/index.css';"},{"note":"Import the `SegmentedOption` type if you are dynamically generating options or need type safety for your option objects.","symbol":"SegmentedOption (Type)","correct":"import type { SegmentedOption } from 'rc-segmented';"}],"quickstart":{"code":"import Segmented from 'rc-segmented';\nimport 'rc-segmented/assets/index.css';\nimport React, { useState } from 'react';\nimport { createRoot } from 'react-dom/client';\n\nconst App = () => {\n const [value, setValue] = useState('Antd');\n\n const handleValueChange = (newValue: string | number) => {\n console.log('Selected value:', newValue);\n setValue(newValue);\n };\n\n return (\n
\n
rc-segmented Demo
\n \n
Currently selected: {value}
\n
\n );\n};\n\nconst mountNode = document.getElementById('root');\nif (mountNode) {\n const root = createRoot(mountNode);\n root.render();\n} else {\n console.error(\"Mount node with ID 'root' not found. Please ensure an element with id='root' exists in your HTML.\");\n}","lang":"typescript","description":"This quickstart demonstrates a basic segmented control with state management, custom options, and event handling using modern React hooks and `createRoot`."},"warnings":[{"fix":"Update your `onChange` handler to accept a single argument representing the selected `value` (string | number).","message":"The `onChange` API changed significantly in versions `v2.0.0+`. Ensure your callback signature matches the new `(value: string | number) => void` type, as it now receives only the selected value.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Add `import 'rc-segmented/assets/index.css';` to your entry file or component where `rc-segmented` is used.","message":"The component requires explicit CSS imports for styling. If the component appears unstyled, you likely forgot to import `rc-segmented/assets/index.css`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Verify your `package.json` and import statements refer to the correct package (`rc-segmented` or `@rc-component/segmented`) to maintain consistency.","message":"There exist two related packages, `rc-segmented` and `@rc-component/segmented`, which receive similar updates. Ensure you are consistently using the intended package, as mixing them or using the wrong one could lead to unexpected behavior or versioning conflicts.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to the latest stable version of `rc-segmented` to benefit from improved accessibility features and compliance.","message":"Older versions of `rc-segmented` (prior to `v2.7.1`) may have had accessibility shortcomings, particularly concerning keyboard navigation and ARIA attributes. These issues have been progressively addressed in recent updates.","severity":"gotcha","affected_versions":"<2.7.1"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Change `import { Segmented } from 'rc-segmented';` to `import Segmented from 'rc-segmented';`","cause":"Incorrect import of the Segmented component; it is a default export.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."},{"fix":"Ensure `import 'rc-segmented/assets/index.css';` is present in your application's entry point or component, and your build tool (e.g., Webpack, Vite) is configured to handle CSS imports.","cause":"The CSS stylesheet for the component was not found or incorrectly imported.","error":"Module not found: Error: Can't resolve 'rc-segmented/assets/index.css' in '...' or similar CSS loading errors."},{"fix":"Ensure the `options` prop is always an array, for example: ``.","cause":"The `options` prop provided to the `Segmented` component is either missing or not a valid array.","error":"TypeError: Cannot read properties of undefined (reading 'map') or 'options' prop is not an array."}],"ecosystem":"npm"}