Checkbox

size
content
checked
disabled
indeterminate
import {Checkbox} from '@gravity-ui/uikit';

Компонент Checkbox позволяет пользователю выбрать или отменить выбор определенного значения.

Состояния

Checkbox может иметь разные состояния:

  • Checked — чекбокс отмечен галочкой.
  • Disabled — чекбокс недоступен.
  • Indeterminate — чекбокс находится в промежуточном состоянии между отмеченным и неотмеченным.
<Checkbox size="l" checked={false}>Unchecked</Checkbox>
<Checkbox size="l" checked>Checked</Checkbox>
<Checkbox size="l" disabled>Disabled</Checkbox>
<Checkbox size="l" indeterminate>Indeterminate</Checkbox>

Размер

Размер Checkbox можно настроить с помощью свойства size. Размер по умолчанию — m.

<Checkbox size="m">M Size</Checkbox>
<Checkbox size="l">L Size</Checkbox>
<Checkbox size="xl">XL Size</Checkbox>

Лейбл

Лейбл для Checkbox можно задать через свойство content или передать его как дочерний элемент.

<div>
  <Checkbox content="Content" size="l" />
  <div
      style={{
          marginTop: 10,
      }}
  >
      <Checkbox size="l">
          <span>Content as children</span>
      </Checkbox>
  </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Включает или отключает состояние indeterminate у чекбокса.booleanfalse
controlPropsДополнительные свойства базового элемента ввода.React.InputHTMLAttributes<HTMLInputElement>
controlRefСсылка на базовый элемент ввода.React.Ref<HTMLInputElement>