{"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,"search_vec":"'/segmented':105 '2.7.1':72 'access':88,134 'activ':39 'akin':43 'ant':22,126,164 'ant-design':163 'antd':162 'api':139 'applic':147 'bug':82 'build':13 'button':32 'cadenc':79 'choic':27,143 'clear':137 'compon':11,49,104,152 'confus':116 'control':3,17,159,161 'crucial':87 'current':68 'customiz':15 'data':52 'deep':123 'design':23,127,165 'develop':118 'differenti':120 'ecosystem':24 'effici':144 'emphasi':132 'enhanc':85 'event':62 'extens':18 'fix':83 'focus':80 'foundat':9 'function':138 'group':30,47 'handl':63 'high':14 'improv':89 'includ':121 'integr':124 'javascript':148 'key':119 'maintain':75 'manag':65,141 'moder':77 'newer':99 'number':57 'object':59 'onchang':61 'one':36 'option':55 'packag':74,97 'parallel':108 'perform':84 'point':114 'present':26 'primari':96 'principl':129 'radio':46 'rc':5,92,103 'rc-compon':102 'rc-segment':4,91 'react':1,10,146,149,151,154,157 'react-compon':150 'react-seg':153 'react-segmented-control':156 'receiv':107 'releas':78 'robust':60 'scope':100 'segment':2,6,16,93,142,155,158,160 'select':66 'sometim':106 'stabl':69 'state':67 'string':56 'strong':131 'support':50 'time':42 'type':53 'typescript':166 'typic':34 'updat':109 'util':19 'various':51 'version':71,101 'within':20,145","created_at":"2026-04-21T04:49:29.376557+00:00","updated_at":"2026-04-21T04:49:29.376557+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://react-component.github.io/segmented","github":"https://github.com/react-component/segmented","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/rc-segmented","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-20","install_tag":null}}