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

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

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

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

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

⚠️ Missing demo `pages/components/switches/Switches.js` ⚠️

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

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

<FormGroup>
  <FormControlLabel control={<Switch defaultChecked />} label="Label" />
  <FormControlLabel disabled control={<Switch />} label="Disabled" />
</FormGroup>

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

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

Assign responsibility

Be careful

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

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

Off

On

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

Размеры

Fancy smaller switches? Use the size prop.

<Switch {...label} defaultChecked size="small" />
<Switch {...label} defaultChecked />

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

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

Label placement

Бесплатно

Доступность

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

API