@rc-component/segmented

_{Part of the Ant Design ecosystem.}

🧩 React segmented control for switching between compact options.

## Highlights - Supports string, number, and labeled option records. - Provides controlled and uncontrolled value flows. - Includes keyboard navigation, RTL, vertical layout, and disabled options. - Exposes semantic `classNames` and `styles` slots for item and label customization. ## Install ```bash npm install @rc-component/segmented ``` ## Usage ```tsx pure import Segmented from '@rc-component/segmented'; import '@rc-component/segmented/assets/index.css'; export default () => ( { console.log(value); }} /> ); ``` Online preview: https://segmented.react-component.vercel.app/ ## Examples Run the local dumi site: ```bash npm install npm start ``` Then open `http://localhost:8000`. ## API ### Segmented | Name | Type | Default | Description | | --- | --- | --- | --- | | `className` | string | `''` | Additional class name. | | `classNames` | Partial> | - | Semantic class names for internal slots. | | `defaultValue` | string \| number | first option value | Initial selected value. | | `direction` | `'ltr'` \| `'rtl'` | - | Layout direction. | | `disabled` | boolean | false | Disable all options. | | `itemRender` | `(node: ReactNode, info: { item: SegmentedLabeledOption }) => ReactNode` | identity | Custom option item renderer. | | `motionName` | string | `'thumb-motion'` | Motion class name for the active thumb. | | `name` | string | - | Radio group name. | | `onChange` | `(value: string \| number) => void` | - | Triggered when the selected value changes. | | `options` | Array | - | Available options. Required. | | `prefixCls` | string | `'rc-segmented'` | Prefix class name. | | `style` | React.CSSProperties | - | Root style. | | `styles` | Partial> | - | Semantic styles for internal slots. | | `value` | string \| number | - | Controlled selected value. | | `vertical` | boolean | false | Render options vertically. | Additional valid `div` props are passed to the root element. ### SegmentedLabeledOption | Name | Type | Default | Description | | --- | --- | --- | --- | | `className` | string | - | Option class name. | | `disabled` | boolean | false | Disable this option. | | `label` | ReactNode | - | Displayed option content. | | `title` | string | derived from label | Native title for the label. | | `value` | string \| number | - | Option value. | ## Development ```bash npm install npm start npm test npm run tsc npm run compile npm run build ``` The dumi site runs at `http://localhost:8000` by default. ## Release ```bash npm run prepublishOnly ``` The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build. ## License @rc-component/segmented is released under the [MIT](./LICENSE) license.