# @snack-uikit/segmented-control

> `npm i @snack-uikit/segmented-control`

Latest version **1.0.1** (published 2026-09-21) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @snack-uikit/segmented-control
pnpm add @snack-uikit/segmented-control
yarn add @snack-uikit/segmented-control
bun add @snack-uikit/segmented-control
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2026-09-21 |
| First published | 2024-06-26 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 91.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 23 |
| Author | Sergei Khlupin |
| Maintainers | yetihead, agrigorii, cloud-ru-tech |

## Links

- npm: https://www.npmjs.com/package/@snack-uikit/segmented-control
- Repository: https://github.com/cloud-ru-tech/snack-uikit.git#master
- Homepage: https://cloud-ru-tech.github.io/snack-uikit/packages/segmented-control
- Issues: https://github.com/cloud-ru-tech/snack-uikit/issues
- npm.io page: https://npm.io/package/@snack-uikit/segmented-control

## Dependencies (5)

- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [uncontrollable](https://npm.io/package/uncontrollable.md) ^8.0.4
- [@snack-uikit/utils](https://npm.io/package/@snack-uikit/utils.md) ^5.0.0
- [@snack-uikit/counter](https://npm.io/package/@snack-uikit/counter.md) ^1.0.1
- [@snack-uikit/truncate-string](https://npm.io/package/@snack-uikit/truncate-string.md) ^1.0.1

## Recent versions

- 1.0.1 (latest) — 2026-09-21
- 1.0.1-preview-acb79d0b.0 (preview) — 2026-09-21
- 1.0.1-preview-b2e4ed46.0 — 2026-09-21
- 1.0.1-preview-27969f64.0 — 2026-09-21
- 1.0.1-preview-fe85442f.0 — 2026-09-18
- 0.6.25-preview-fc6b5b87.0 — 2026-08-20
- 0.6.24 — 2026-08-07
- 0.6.24-preview-4e8bfebd.0 — 2026-08-07
- 0.6.24-preview-eff3bc02.0 — 2026-08-03
- 0.6.23 — 2026-07-03
- 0.6.23-preview-74429015.0 — 2026-07-03
- 0.6.23-preview-02d918ac.0 — 2026-07-03
- 0.6.23-preview-6a625dbd.0 — 2026-06-30
- 0.6.23-preview-9f7f3a20.0 — 2026-06-30
- 0.6.22 — 2026-06-24
- … 142 more at https://npm.io/package/@snack-uikit/segmented-control/versions

## README

# Segmented Control

## Installation
`npm i @snack-uikit/segmented-control`

[Changelog](./CHANGELOG.md)

## Description

- Пакет `@snack-uikit/segmented-control` предоставляет компонент `SegmentedControl` для выбора одного значения из набора опций, представленных в виде сегментов.
- Компонент поддерживает работу в контролируемом и неконтролируемом режимах, позволяет задавать размеры (`xs`, `s`, `m`, `l`), управлять шириной (`auto`, `full`) и добавлять обводку (`outline`).
- Каждый сегмент может содержать текстовую метку (`label`), иконку (`icon`), счётчик (`counter`) или их комбинации, а также может быть отключён (`disabled`).
- Компонент поддерживает навигацию с клавиатуры (стрелки, Tab, Enter) и позволяет оборачивать сегменты в произвольные компоненты через `renderWrapSegment` (например, для добавления тултипов).
- Figma: [`SegmentedControl`](https://www.figma.com/design/jtGxAPvFJOMir7V0eQFukN/branch/5GN8XXj3rBfLTWvJA7kliW/Snack-UI-Kit-3.1.0?node-id=3025-1827&t=z817Qjsi8DfuRDiK-0).

## Example

```tsx
import { useState } from 'react';
import { SegmentedControl } from '@snack-uikit/segmented-control';
import { PlaceholderSVG } from '@snack-uikit/icons';
import { Tooltip } from '@snack-uikit/tooltip';

function Example() {
  const [selected, setSelected] = useState('1');

  return (
    <SegmentedControl
      items={[
        { label: 'Chip', value: '1', icon: <PlaceholderSVG /> },
        { label: 'Gadget Hackwrench', value: '2', icon: <PlaceholderSVG /> },
        { label: 'Dale', value: '3', counter: { value: 9, appearance: 'neutral' } },
        {
          label: 'Zipper',
          value: '4',
          icon: <PlaceholderSVG />,
          disabled: true,
          renderWrapSegment: segment => (
            <Tooltip tip='Not a rodent' placement='bottom'>
              {segment}
            </Tooltip>
          ),
        },
        { label: 'Monterey Jack', value: '5', counter: { value: 10 } },
      ]}
      value={selected}
      onChange={setSelected}
      size="m"
      width="auto"
    />
  );
}
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## SegmentedControl
SegmentedControl
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| items* | `Segment<Value>[]` | - | Набор сегментов. |
| value | `IdType` | - | Value выбранного сегмента. |
| defaultValue | `IdType` | - | ID выбранного по умолчанию сегмента. (в uncontrolled режиме) |
| onChange | `(value: Value) => void` | - | Колбек смены выбранного сегмента. |
| className | `string` | - | CSS-класс контейнера. |
| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | m | Размер компонента. |
| outline | `boolean` | - | Обводка |
| width | enum Width: `"auto"`, `"full"` | auto | Управление шириной компонента. |
| name | `string` | - | Имя поля |


[//]: DOCUMENTATION_SECTION_END

---
_Source: https://npm.io/package/@snack-uikit/segmented-control · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._