Switch

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 у переключателя.booleanfalse
checkedВключает или отключает состояние checked у переключателя.booleanfalse
defaultCheckedЗадает начальное состояние checked при монтировании компонента.booleanfalse
onUpdateСрабатывает при изменении состояния переключателя пользователем и передает значение checked как аргумент обратного вызова.(checked: boolean) => void
onChangeСрабатывает при изменении состояния переключателя пользователем и передает событие изменения как аргумент обратного вызова.Function
onFocusОбработчик события, вызываемый, когда элемент ввода переключателя получает фокус.Function
onBlurОбработчик события, вызываемый, когда элемент ввода переключателя теряет фокус.Function
sizeОпределяет размер переключателя.m lm
idHTML-атрибут id.string
qaHTML-атрибут data-qa, используется для тестирования.string
styleHTML-атрибут style.React.CSSProperties
classNameHTML-атрибут class.string
titleHTML-атрибут title.string
nameHTML-атрибут name для элемента ввода.string
valueHTML-атрибут value для элемента ввода.string
indeterminateВключает или отключает состояние неопределенности переключателя.booleanfalse
controlPropsДополнительные свойства базового элемента ввода.React.InputHTMLAttributes<HTMLInputElement>
controlRefСсылка на базовый элемент ввода.React.Ref<HTMLInputElement>