Switch

Switch — составной компонент для бинарных настроек, применяемых сразу: нативный input отвечает за семантику и состояние, а индикатор — за видимую дорожку и бегунок.

Storybook Исходники Figma

Пропсы корня

Проп	Тип	По умолчанию
`variant`	`SwitchVariant`	`'primary'`
Визуальный вариант чекбокса для переключения темы или контекста.
`size`	`SwitchSize`	`'md'`
Размер чекбокса и его визуального маркера.
`ref`	`Ref<HTMLLabelElement>`	—
Ref на нативный элемент label.

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

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

SwitchInput: нативное состояние checked и участие в форме.
SwitchIndicator: видимая поверхность переключателя.

`SwitchInput`

Проп	Тип	По умолчанию
`ref`	`Ref<HTMLInputElement>`	—
Ref, передаваемый на нижележащий нативный элемент `<input>`

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

`SwitchIndicator`

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

Типы

SwitchProps
SwitchInputProps
SwitchIndicatorProps
SwitchVariant
SwitchSize

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

Видимый корень в основном задаёт контекст размера и варианта.
Семантика checked и disabled обычно живёт на SwitchInput.
useSwitchContext доступен для продвинутых обёрток и собственных композиций.