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

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

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

Переключатели – предпочтительный способ установки параметров на мобильных устройствах. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.

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

Переключатель с 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