SegmentedControl

SegmentedControl — составной компонент для коротких, всегда видимых наборов взаимоисключающих вариантов с нативными радиоинпутами на уровне элементов и анимированным индикатором выбранного состояния.

Storybook Исходники Figma

Пропсы корня

Проп	Тип	По умолчанию
`disabled`	`boolean`	—
Отключает все сегменты, запрещая взаимодействие.
`size`	`SegmentedControlSize`	`'md'`
Визуальный размер сегментированного контрола.
`variant`	`SegmentedControlVariant`	`'secondary'`
Вариант визуального стиля сегментированного контрола.
`ref`	`Ref<HTMLDivElement>`	—
Ref на корневой элемент-контейнер. Полезен для измерений или управления фокусом.
`value`	`SegmentedControlValue`	—
Текущее выбранное значение сегментированного контрола
`defaultValue`	`SegmentedControlValue`	`''`
Начальное выбранное значение, когда компонент используется в неконтролируемом режиме
`onChange`	`(e: ChangeEvent<HTMLInputElement>) => void`	—
Вызывается при изменении выбранного сегмента. Это событие повторяет нативное событие `change` радиокнопки и может использоваться для интеграции с формами или отслеживания выбора пользователя. Целью события является скрытый `<input type="radio">`.
`name`обязательный	`string`	—
Имя нижележащей группы радиокнопок. Все элементы `SegmentedControlItemInput` используют это имя, поэтому сегментированный контрол ведёт себя как одна нативная группа радиокнопок для отправки формы и доступности.

Также принимает все атрибуты <div>.

Дочерние части

SegmentedControlItem: видимый выбираемый сегмент.
SegmentedControlIndicator: анимированная поверхность выбранного состояния.
SegmentedControlItemInput: нативный радиоинпут для каждого элемента.

`SegmentedControlItem`

Проп	Тип	По умолчанию
`disabled`	`boolean`	—
Отключает элемент, запрещая выбор и фокус.
`size`	`SegmentedControlSize`	—
Управляет размером элемента. Влияет на отступы, размер шрифта и интервалы.
`variant`	`SegmentedControlVariant`	—
Вариант визуального стиля элемента.
`value`обязательный	`SegmentedControlValue`	—
Уникальное значение, связанное с этим сегментом
`ref`	`Ref<HTMLLabelElement>`	—
Ref, передаваемый на нижележащий элемент `<label>`.

Также принимает все атрибуты <label>.

`SegmentedControlIndicator`

Также принимает все атрибуты <div>.

`SegmentedControlItemInput`

Также принимает все атрибуты <input>.

Типы

SegmentedControlProps
SegmentedControlItemProps
SegmentedControlIndicatorProps
SegmentedControlItemInputProps
SegmentedControlSize
SegmentedControlVariant

Модель состояния

SegmentedControl может быть неконтролируемым через defaultValue или контролируемым через value и onChange.
В неконтролируемом режиме выбором владеет нативная группа радиокнопок: клики, клавиатура, сброс формы и программные изменения checked применяются без состояния React.
SegmentedControlIndicator привязан к отмеченному сегменту через CSS, поэтому следует за любым из этих изменений.
Для продвинутых обёрток и кастомных композиций доступен useSegmentedControlContext.