Checkbox

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

Чекбоксы могут быть использованы для включения или выключения различных опций.

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

Basic checkboxes

Checkbox with FormControlLabel

Checkbox can be provided with a label thanks to the FormControlLabel component.

Чекбоксы с FormGroup

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

Расположение метки

Расположение метки можно изменить:

Label Placement

TopStartBottomEnd

Customized checkbox

Ниже находится пример кастомизации компонента. You can learn more about this in the overrides documentation page.

🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.

Бесплатно

Доступность

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#checkbox)

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

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