UIKit
7.16.2
• SwitchКомпоненты
UIKit
7.16.2
Date Components
3.2.1
Navigation
3.3.9
Switch
Maintainer:
zamkovskaya
size
content
checked
disabled
import {Switch} from '@gravity-ui/uikit';
Компонент Switch
(переключатель) используется для переключения между двумя состояниями: как правило, между On и Off или Enabled и Disabled.
§Состояния
Switch
может иметь разные состояния:
- Checked — когда переключатель включен.
- Disabled — когда переключатель недоступен.
<Switch size="l" checked={false}>Unchecked</Switch>
<Switch size="l" checked>Checked</Switch>
<Switch size="l" disabled>Disabled</Switch>
§Размер
Размер Switch
можно настроить с помощью свойства size
. Размер по умолчанию — m
.
<Switch size="m">M Size</Switch>
<Switch size="l">L Size</Switch>
§Лейбл
Лейбл для Switch
можно задать через свойство content
или передать его как дочерний элемент.
<div>
<Switch content="Content" size="l" />
<div
style={{
marginTop: 10,
}}
>
<Switch size="l">
<span>Content as children</span>
</Switch>
</div>
</div>
§Свойства
Имя | Описание | Тип | Значение по умолчанию |
---|---|---|---|
children | Содержимое переключателя (как правило, лейбл). | ReactNode | |
content | Содержимое переключателя (альтернатива children ). | ReactNode | |
disabled | Включает или отключает состояние disabled у переключателя. | boolean | false |
checked | Включает или отключает состояние checked у переключателя. | boolean | false |
defaultChecked | Задает начальное состояние checked при монтировании компонента. | boolean | false |
onUpdate | Срабатывает при изменении состояния переключателя пользователем и передает значение checked как аргумент обратного вызова. | (checked: boolean) => void | |
onChange | Срабатывает при изменении состояния переключателя пользователем и передает событие изменения как аргумент обратного вызова. | Function | |
onFocus | Обработчик события, вызываемый, когда элемент ввода переключателя получает фокус. | Function | |
onBlur | Обработчик события, вызываемый, когда элемент ввода переключателя теряет фокус. | Function | |
size | Определяет размер переключателя. | m l | m |
id | HTML-атрибут id . | string | |
qa | HTML-атрибут data-qa , используется для тестирования. | string | |
style | HTML-атрибут style . | React.CSSProperties | |
className | HTML-атрибут class . | string | |
title | HTML-атрибут title . | string | |
name | HTML-атрибут name для элемента ввода. | string | |
value | HTML-атрибут value для элемента ввода. | string | |
indeterminate | Включает или отключает состояние неопределенности переключателя. | boolean | false |
controlProps | Дополнительные свойства базового элемента ввода. | React.InputHTMLAttributes<HTMLInputElement> | |
controlRef | Ссылка на базовый элемент ввода. | React.Ref<HTMLInputElement> |