Галочка (Checkbox)

Галочки позволяют пользователю выбрать один или несколько элементов из набора.

Галочки можно использовать для включения или выключения опции.

Если в списке отображается несколько вариантов, вы можете сэкономить место, используя галочки вместо переключателей "вкл/выкл". Если у вас одна опция, избегайте использования галочек и используйте переключатель включения/выключения.

Базовые галочки

<Checkbox {...label} defaultChecked />
<Checkbox {...label} />
<Checkbox {...label} disabled />
<Checkbox {...label} disabled checked />
<Checkbox {...label} defaultChecked />
<Checkbox {...label} />
<Checkbox {...label} disabled />
<Checkbox {...label} disabled checked />

Press Enter to start editing

Подпись

Вы можете предоставить подпись для Checkbox благодаря компоненту FormControlLabel.

LabelDisabled

<FormGroup>
  <FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
  <FormControlLabel disabled control={<Checkbox />} label="Disabled" />
</FormGroup>
<FormGroup>
  <FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
  <FormControlLabel disabled control={<Checkbox />} label="Disabled" />
</FormGroup>

Press Enter to start editing

Размер

Используйте параметр size или настройте размер шрифта SVG-иконок, чтобы изменить размер галочек.

<Checkbox {...label} defaultChecked size="small" />
<Checkbox {...label} defaultChecked />
<Checkbox
  {...label}
  defaultChecked
  sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
/>
<Checkbox {...label} defaultChecked size="small" />
<Checkbox {...label} defaultChecked />
<Checkbox
  {...label}
  defaultChecked
  sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
/>

Press Enter to start editing

Цвет

<Checkbox {...label} defaultChecked />
<Checkbox {...label} defaultChecked color="secondary" />
<Checkbox {...label} defaultChecked color="success" />
<Checkbox {...label} defaultChecked color="default" />
<Checkbox
  {...label}
  defaultChecked
  sx={{
    color: pink[800],
    '&.Mui-checked': {
      color: pink[600],
    },
  }}
/>
<Checkbox {...label} defaultChecked />
<Checkbox {...label} defaultChecked color="secondary" />
<Checkbox {...label} defaultChecked color="success" />
<Checkbox {...label} defaultChecked color="default" />
<Checkbox
  {...label}
  defaultChecked
  sx={{
    color: pink[800],
    '&.Mui-checked': {
      color: pink[600],
    },
  }}
/>

Press Enter to start editing

Иконка

<Checkbox {...label} icon={<FavoriteBorder />} checkedIcon={<Favorite />} />
<Checkbox
  {...label}
  icon={<BookmarkBorderIcon />}
  checkedIcon={<BookmarkIcon />}
/>
<Checkbox {...label} icon={<FavoriteBorder />} checkedIcon={<Favorite />} />
<Checkbox
  {...label}
  icon={<BookmarkBorderIcon />}
  checkedIcon={<BookmarkIcon />}
/>

Press Enter to start editing

Управляемые галочки

Вы можете управлять галочкой с помощью реквизитов checked и onChange:

<Checkbox
  checked={checked}
  onChange={handleChange}
  inputProps={{ 'aria-label': 'controlled' }}
/>
<Checkbox
  checked={checked}
  onChange={handleChange}
  inputProps={{ 'aria-label': 'controlled' }}
/>

Press Enter to start editing

Неопределенные галочки

Галочка может иметь только два состояния в форме: отмечена или не отмечена. Она либо передает (submits, сабмитит) свое значение, либо нет. Визуально галочка может находиться в трех состояниях: отмечена, не отмечена или неопределенная.

Parent

Child 1Child 2

<FormControlLabel
  label="Parent"
  control={
    <Checkbox
      checked={checked[0] && checked[1]}
      indeterminate={checked[0] !== checked[1]}
      onChange={handleChange1}
    />
  }
/>
{children}
<FormControlLabel
  label="Parent"
  control={
    <Checkbox
      checked={checked[0] && checked[1]}
      indeterminate={checked[0] !== checked[1]}
      onChange={handleChange1}
    />
  }
/>
{children}

Press Enter to start editing

FormGroup

FormGroup - это полезная обертка, используемая для группировки компонентов управления выбором.

Размещение подписи

Вы можете изменить расположение подписи:

Label placement

TopStartBottomEnd

Кастомизация

Здесь приведен пример настройки компонента. Подробнее об этом можно узнать на странице документации overrides.

<BpCheckbox />
<BpCheckbox defaultChecked />
<BpCheckbox disabled />
<BpCheckbox />
<BpCheckbox defaultChecked />
<BpCheckbox disabled />

Press Enter to start editing

🎨 Если вы ищете вдохновение, вы можете посмотреть примеры кастомизации MUI Treasury.

Когда использовать

Доступность

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/)

Все элементы управления формы должны иметь метки, и это касается радиокнопок, флажков и переключателей. В большинстве случаев для этого используется элемент <label> (FormControlLabel).
Когда метка не может быть использована, необходимо добавить атрибут непосредственно к компоненту ввода. В этом случае вы можете применить дополнительный атрибут (например, aria-label, aria-labelledby, title) через свойство inputProps.

<Checkbox
  value="checkedA"
  inputProps={{
    'aria-label': 'Checkbox A',
  }}
/>

Галочка (Checkbox)

Базовые галочки

Подпись

Размер

Цвет

Иконка

Управляемые галочки

Неопределенные галочки

FormGroup

Размещение подписи

Кастомизация

Когда использовать

Доступность

API