Switch (переключатель)

Переключатели изменяют состояние одного отдельного параметра между "включено" и "выключено".

Переключатели – предпочтительный способ установки параметров на мобильных устройствах. Опция, которую контролирует переключатель, и её состояние должны быть четко описаны в соответствующей метке.

Основные переключатели

Переключатель с FormControlLabel

Switch can be provided with a description thanks to the FormControlLabel component.

Переключатели с FormGroup

FormGroup - это полезная обертка, используемая для группировки компонентов элементов управления выбором, она предоставляет более простой API. However, you are encouraged you to use Checkboxes instead if multiple related controls are required. (See: When to use).

Assign responsibility

Gilad GrayJason KillianAntoine Llorca

Be careful

Кастомизация переключателей

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

Custom coloriOS style

Off

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

Размеры

Fancy smaller switches? Использовать свойство size.

SmallNormal

<FormGroup>
  <FormControlLabel
    control={<Switch size="small" checked={checked} onChange={toggleChecked} />}
    label="Small"
  />
  <FormControlLabel
    control={<Switch checked={checked} onChange={toggleChecked} />}
    label="Normal"
  />
</FormGroup>

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

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

TopStartBottomEnd

Бесплатно

Чекбоксы. Switch (переключатели)

Доступность

У элемента будет роль checkbox, а не switch, так как эта роль пока слабо поддерживается. Если вы хотите использовать роль switch, пожалуйста, сперва проверьте что вспомогательные технологии вашей целевой аудитории её поддерживают. После этого вы можете изменить роль <Switch inputProps={{ role: 'switch' }}>
Все элементы формы должны иметь метки, в том числе радиокнопки, переключатели и чекбоксы. В большинстве случаев это делается с помощью элемента <label> (FormControlLabel).
Когда метка не может быть использована, необходимо добавить атрибут непосредственно на поле ввода. В этом случае можно применить дополнительный атрибут (например, aria-label, aria-labelledby, title) через свойство inputProps.

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