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

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

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

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

Basic switches

Switch with 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

Be careful

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

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

Размеры

Fancy smaller switches? Use the size property.

<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