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

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

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

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

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

<Switch {...label} defaultChecked />
<Switch {...label} />
<Switch {...label} disabled defaultChecked />
<Switch {...label} disabled />

Checkbox with FormGroup (Чекбоксы с FormGroup)

You can provide a label to the Switch thanks to the FormControlLabel component.

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

Size

Use the size prop to change the size of the switch.

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

Цвет

<Switch {...label} defaultChecked />
<Switch {...label} defaultChecked color="secondary" />
<Switch {...label} defaultChecked color="warning" />
<Switch {...label} defaultChecked color="default" />
<GreenSwitch {...label} defaultChecked />

Controlled

You can control the switch with the checked and onChange props:

<Switch
  checked={checked}
  onChange={handleChange}
  inputProps={{ 'aria-label': 'controlled' }}
/>

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

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

Assign responsibility

Be careful

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

Ниже находятся примеры кастомизации компонента. Вы можете узнать об этом больше в документации по переопределению свойств.

Off

On

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

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

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

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