# @leafygreen-ui/segmented-control > leafyGreen UI Kit Segmented Control Latest version **11.1.1** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @leafygreen-ui/segmented-control pnpm add @leafygreen-ui/segmented-control yarn add @leafygreen-ui/segmented-control bun add @leafygreen-ui/segmented-control ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 11.1.1 | | Published | 2026-10-02 | | First published | 2021-10-11 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 10 | | Unpacked size | 253.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 274 | | Maintainers | thesonofthomp, shaneeza, stephl3, aitchpgm, hnevins, _tsck | ## Links - npm: https://www.npmjs.com/package/@leafygreen-ui/segmented-control - Repository: https://github.com/mongodb/leafygreen-ui - Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/segmented-control - Issues: https://jira.mongodb.org/projects/PD/summary - npm.io page: https://npm.io/package/@leafygreen-ui/segmented-control ## Dependencies (10) - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [polished](https://npm.io/package/polished.md) ^4.2.2 - [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1 - [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.9.1 - [@leafygreen-ui/hooks](https://npm.io/package/@leafygreen-ui/hooks.md) ^9.3.2 - [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.3 - [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.1 - [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.3 - [@leafygreen-ui/typography](https://npm.io/package/@leafygreen-ui/typography.md) ^22.2.5 - [@leafygreen-ui/polymorphic](https://npm.io/package/@leafygreen-ui/polymorphic.md) ^3.1.1 ## Recent versions - 11.1.1 (latest) — 2026-10-02 - 8.2.1 (beta) — 2023-07-26 - 9.0.0-alpha.1 (alpha) — 2023-07-20 - 8.1.1-next.7 (next) — 2023-05-26 - 3.1.0-test.0 (test) — 2022-09-22 - 11.1.0 — 2026-02-03 - 11.0.13 — 2026-01-21 - 11.0.12 — 2025-11-24 - 11.0.11 — 2025-11-13 - 11.0.10 — 2025-10-31 - 11.0.9 — 2025-10-21 - 11.0.8 — 2025-09-25 - 11.0.7 — 2025-09-10 - 11.0.6 — 2025-09-03 - 11.0.5 — 2025-08-08 - … 73 more at https://npm.io/package/@leafygreen-ui/segmented-control/versions ## README # Segmented Control ![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/segmented-control.svg) #### [View on MongoDB.design](https://www.mongodb.design/component/segmented-control/live-example/) ## Installation ### PNPM ```shell pnpm add @leafygreen-ui/segmented-control ``` ### Yarn ```shell yarn add @leafygreen-ui/segmented-control ``` ### NPM ```shell npm install @leafygreen-ui/segmented-control ``` ## Example ```js import { SegmentedControl, SegmentedControlOption, } from '@leafygreen-ui/segmented-control'; { console.log(value); }} > Apple Banana Carrot Dragonfruit ; ``` ## Props | Prop | Type | Description | Default | | ----------------- | --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | | `children` | `React.ReactNode` | Children must be `SegmentedControlOptions` | `null` | | `size` | `'xsmall' \| 'small' \| 'default' \| 'large'` | Defines the size of the segmented control. | `default` | | `darkMode` | `boolean` | Toggles dark mode | `false` | | `defaultValue` | `string` | Defines the default, or initial value of the component. Ignored if `value` is also provided. | `''` | | `value` | `string` | Controls the value of the component. If provided, you must update the value in the `onChange` method, or other user actions (such as routing) | | | `label` | `string` | A text label to the left of the segmented control. Sets the `name` prop if none is provided. | | | `name` | `string` | Identifies the segmented control group to screen readers. Auto-generated if no `name` or `label` is provided. It's recommended for accessability to set this to a meaningful value for accessibility. | | | `followFocus` | `boolean` | Defines whether the selection should automatically follow focus. If set to true, the arrow keys can be used to switch selection, otherwise a keyboard user will need to press enter to make a selection. | `true` | | `'aria-controls'` | `string` | An `id` ref that identifies the element(s) whose contents/presence is controlled by the segmented control. Required as a prop on the control, or on each individual option. | | | `className` | `string` | Adds a className to the outermost element. | | | `onChange` | `(value: string) => void` | Callback that gets called when a user makes a new selection. | | # SegmentedControlOption ## Props | Prop | Type | Description | Default | | ----------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | | `children` | `React.ReactNode` | Should be text. | | | `value` | `string` | Required. The value of the option. | | | `glyph` | `React.ReactElement` | The icon to display to the left of the option. | | | `disabled` | `boolean` | Toggles whether the option is disabled. | `false` | | `as` | `string` | Render the option wrapped in another component. Typically used for router `Link` components. | `'div'` | | `'aria-controls'` | `string` | An `id` ref that identifies the element(s) whose contents/presence is controlled by the segmented control. Required as a prop on the control, or on each individual option. | | | `className` | `string` | Adds a className to the outermost element. | | | `_id` | `string` | Internal. A unique identifier for the option | `${name}-${index}` | | `_checked` | `boolean` | Internal. Identifies whether the option is checked. | | | `_focused` | `boolean` | Internal. Identifies whether the option has focus | | | `_index` | `number` | Internal. The index of the option | | | `_onClick` | `(value: string) => void` | Internal. Calls the onChange callback | | | `_onHover` | `(hovered: boolean) => void` | Internal. Fires on mouse in and out | | --- _Source: https://npm.io/package/@leafygreen-ui/segmented-control · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._