Checkbox

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>

§Свойства