Перейти к контенту
Редактировать эту страницу

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

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

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

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

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

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

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

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

Assign responsibility

Be careful

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

Ниже находятся примеры кастомизации компонента. 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.

Размеры

Fancy smaller switches? Use the size prop.

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

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

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

Бесплатно

Доступность

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

API