Switch компонент

Компонент Switch в библиотеке MUI представляет собой визуальный элемент управления, позволяющий пользователю переключать состояние между двумя вариантами: включено и выключено. В отличие от стандартного чекбокса, Switch имеет более современный вид и используется для индикации состояния, которое часто влияет на глобальные настройки приложения.

В MUI Switch реализован как функциональный компонент React, который поддерживает все стандартные свойства элементов формы, включая checked, onChange, disabled и color.

import Switch from '@mui/material/Switch';

function BasicSwitch() {
  const [checked, setChecked] = React.useState(false);

  const handleChange = (event) => {
    setChecked(event.target.checked);
  };

  return <Switch checked={checked} onCha nge={handleChange} />;
}
  • checked — булевое значение, определяющее текущее состояние переключателя.
  • onChange — функция обратного вызова, вызываемая при изменении состояния.
  • disabled — если true, элемент становится недоступным для взаимодействия.
  • color — определяет цвет активного состояния переключателя (primary, secondary, default и другие кастомные значения).

Управление состоянием Switch

Switch может использоваться в контролируемом и неконтролируемом режимах:

  • Контролируемый режим подразумевает управление состоянием через React state. Пример выше демонстрирует такой подход.
  • Неконтролируемый режим позволяет Switch хранить внутреннее состояние самостоятельно, используя defaultChecked вместо checked:
<Switch defaultChecked />

В этом случае React state не требуется, и компонент сам запоминает текущее положение переключателя.

Настройка внешнего вида

MUI предоставляет гибкую кастомизацию Switch с помощью свойства sx и системных цветов:

<Switch
  checked={checked}
  onCha nge={handleChange}
  sx={{
    '& .MuiSwitch-thumb': {
      backgroundColor: 'orange',
    },
    '& .Mui-checked': {
      color: 'green',
    },
    '& .MuiSwitch-track': {
      backgroundColor: 'lightgray',
    },
  }}
/>
  • MuiSwitch-thumb — стили для бегунка.
  • MuiSwitch-track — стили для дорожки переключателя.
  • Mui-checked — стили для активного состояния.

Также возможна настройка через тему MUI, позволяя задать единый стиль для всех Switch в приложении.

Интеграция с FormControl и FormGroup

Switch часто используется внутри форм. MUI предлагает оборачивать Switch в FormControlLabel для добавления текста метки:

import FormControlLabel from '@mui/material/FormControlLabel';

<FormControlLabel
  control={<Switch checked={checked} onCha nge={handleChange} />}
  label="Включить уведомления"
/>

Если требуется несколько переключателей в группе, используют FormGroup для вертикального или горизонтального расположения:

import FormGroup from '@mui/material/FormGroup';

<FormGroup>
  <FormControlLabel control={<Switch />} label="Опция 1" />
  <FormControlLabel control={<Switch />} label="Опция 2" />
</FormGroup>

Адаптивность и доступность

Switch в MUI полностью соответствует стандартам доступности (ARIA). Он поддерживает:

  • aria-label — для описания назначения переключателя.
  • aria-checked — отражает текущее состояние.
  • tabIndex — управление навигацией с клавиатуры.

Пример с доступностью:

<Switch
  checked={checked}
  onCha nge={handleChange}
  inputProps={{ 'aria-label': 'Включение темной темы' }}
/>

Продвинутые возможности

  • Размеры: Switch поддерживает проп size="small" и size="medium" для изменения размеров бегунка.
  • Контрастный цвет: можно использовать color="success", color="error", создавая визуальное соответствие статусу действия.
  • Комбинация с другими компонентами: Switch легко интегрируется с карточками, списками и диалогами, обеспечивая динамическое управление состоянием элементов интерфейса.

Пример динамического изменения состояния через Switch:

function ThemeToggle() {
  const [darkMode, setDarkMode] = React.useState(false);

  const handleThemeChange = () => {
    setDarkMode(!darkMode);
    document.body.style.backgroundColor = darkMode ? '#fff' : '#121212';
  };

  return (
    <FormControlLabel
      control={<Switch checked={darkMode} onCha nge={handleThemeChange} />}
      label="Темная тема"
    />
  );
}

Итог

Switch в MUI — это гибкий, настраиваемый компонент, который подходит для реализации бинарных переключателей в интерфейсе. Благодаря интеграции с FormControl, системам стилизации и поддержке доступности, он может быть использован как для простых форм, так и для сложных интерфейсных решений, где требуется четкая визуальная индикация состояния.

Оглавление