# rc-segmented > React segmented controls used in ant.design Latest version **2.7.1** (published 2025-12-22) · MIT license · 0 weekly downloads ## Install ```sh npm install rc-segmented pnpm add rc-segmented yarn add rc-segmented bun add rc-segmented ``` ## Health **Score 65/100 (B)** — status: stable. Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 2.7.1 | | Published | 2025-12-22 | | First published | 2022-02-14 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 4 | | Unpacked size | 48.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 16 | | Maintainers | afc163, vagusx, zombiej | | Keywords | react, react-component, react-segmented, react-segmented-controls, segmented controls, antd, ant-design | ## Links - npm: https://www.npmjs.com/package/rc-segmented - Repository: https://github.com/react-component/segmented - Homepage: https://react-component.github.io/segmented - Issues: http://github.com/react-component/segmented/issues - npm.io page: https://npm.io/package/rc-segmented ## Dependencies (4) - [rc-util](https://npm.io/package/rc-util.md) ^5.17.0 - [rc-motion](https://npm.io/package/rc-motion.md) ^2.4.4 - [classnames](https://npm.io/package/classnames.md) ^2.2.1 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.11.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.7.1 (latest) — 2025-12-22 - 2.1.0-beta.0 (beta) — 2022-04-28 - 2.7.0 — 2024-12-08 - 2.6.0 — 2024-11-21 - 2.5.0 — 2024-09-05 - 2.4.1 — 2024-08-05 - 2.4.0 — 2024-08-05 - 2.3.0 — 2024-01-22 - 2.2.2 — 2023-05-21 - 2.2.0 — 2023-04-21 - 2.1.2 — 2023-02-06 - 2.1.1 — 2023-02-06 - 2.1.0 — 2022-04-28 - 2.0.0 — 2022-04-23 - 1.3.1 — 2022-04-22 - … 5 more at https://npm.io/package/rc-segmented/versions ## README # rc-segmented [![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [npm-image]: http://img.shields.io/npm/v/rc-segmented.svg?style=flat-square [npm-url]: http://npmjs.org/package/rc-segmented [github-actions-image]: https://github.com/react-component/segmented/workflows/CI/badge.svg [github-actions-url]: https://github.com/react-component/segmented/actions [codecov-image]: https://codecov.io/gh/react-component/segmented/branch/master/graph/badge.svg [codecov-url]: https://codecov.io/gh/react-component/segmented/branch/master [download-image]: https://img.shields.io/npm/dm/rc-segmented.svg?style=flat-square [download-url]: https://npmjs.org/package/rc-segmented [bundlephobia-url]: https://bundlephobia.com/package/rc-segmented [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-segmented React Segmented Control. ![](https://gw.alipayobjects.com/mdn/rms_50855f/afts/img/A*bmGGQpnWs0oAAAAAAAAAAAAAARQnAQ) ## Live Demo https://react-component.github.io/segmented/ ## Install [![rc-segmented](https://nodei.co/npm/rc-segmented.png)](https://npmjs.org/package/rc-segmented) ## Usage ```js import Segmented from 'rc-segmented'; import 'rc-segmented/assets/index.css'; // import 'rc-segmented/asssets/index.less'; import { render } from 'react-dom'; render( handleValueChange(value)} />, mountNode, ); ``` ## API Please note that **onChange** API changed on v2.0.0+ | Property | Type | Default | Description | | --------- | --------- | --------- | --------- | | prefixCls | string | rc-segmented | prefixCls of this component | | className | string | '' | additional class name of segmented | | style | React.CSSProperties | | style properties of segmented | | options | Array | [] | options for choices | | value | string \| number | | value of segmented | | defaultValue | string \| number | | defaultValue of segmented | | value | string \| number | | currently selected value of segmented | | onChange | (value: string \| number) => void | | defaultValue of segmented | | disabled | boolean | false | disabled status of segmented | ### SegmentedOption | Property | Type | Default | Description | | --------- | --------- | --------- | --------- | | label | ReactNode | | label of segmented option | | value | string \| number | | value of segmented option | | className | string | '' | additional class name of segmented option | | disabled | boolean | false | disabled status of segmented option | ## Development ``` npm install npm start ``` ## License rc-segmented is released under the MIT license. --- _Source: https://npm.io/package/rc-segmented · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._