Switch

Компонент Switch в Chakra UI представляет собой визуальный элемент для управления логическим состоянием — включено или выключено. Он аналогичен стандартному HTML <input type="checkbox">, но предоставляет современный дизайн, встроенные анимации и полную интеграцию с темами Chakra UI. Основное назначение — переключение между двумя состояниями.

Импорт и базовое использование

Для работы с Switch необходимо импортировать компонент из библиотеки:

import { Switch } from "@chakra-ui/react";

Базовый пример:

<Switch />

По умолчанию компонент не управляемый. Его состояние определяется внутренним механизмом Chakra UI. Для управления состоянием извне используется атрибут isChecked.

Управляемый и неуправляемый Switch

Неуправляемый Switch:

<Switch defaultIsChecked />
  • defaultIsChecked — задает начальное состояние включено.
  • Состояние изменяется автоматически при клике пользователем.

Управляемый Switch:

import { useState } from "react";

const ControlledSwitch = () => {
  const [checked, setChecked] = useState(false);

  return (
    <Switch 
      isChecked={checked} 
      onCha nge={(e) => setChecked(e.target.checked)} 
    />
  );
};
  • isChecked — текущее состояние, управляемое извне.
  • onChange — событие, срабатывающее при изменении состояния.

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

Основные свойства

  • isChecked — булево значение, определяет состояние переключателя.
  • defaultIsChecked — задает состояние по умолчанию для неуправляемого компонента.
  • onChange — функция, вызываемая при изменении состояния. Получает объект события как аргумент.
  • isDisabled — блокирует переключатель и делает его некликабельным.
  • size — задает размер компонента: "sm" | "md" | "lg".
  • colorScheme — изменяет цвет активного состояния, например: "teal", "red", "blue".

Пример с настройкой цвета и размера:

<Switch size="lg" colorScheme="teal" defaultIsChecked />

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

Switch можно использовать вместе с компонентом FormControl для создания форм с корректной разметкой и доступностью.

import { FormControl, FormLabel, Switch } from "@chakra-ui/react";

<FormControl display="flex" alignItems="center">
  <FormLabel htmlFor="email-alerts" mb="0">
    Получать уведомления по email?
  </FormLabel>
  <Switch id="email-alerts" />
</FormControl>
  • display="flex" и alignItems="center" позволяют выровнять метку и переключатель по горизонтали.
  • FormLabel с htmlFor обеспечивает доступность для экранных читалок.

Стилизация через Chakra UI

Использование sx и chakra props:

<Switch 
  size="md" 
  colorScheme="blue"
  sx={{
    border: "1px solid",
    borderColor: "gray.200",
    _hover: { bg: "gray.100" },
  }}
/>
  • _hover — стиль при наведении.
  • Можно использовать _checked для стилизации активного состояния:
<Switch 
  colorScheme="pink"
  _checked={{ bg: "pink.400" }}
/>

Анимация и поведение

Switch в Chakra UI поддерживает плавные анимации при переключении. Триггером является изменение состояния isChecked:

  • Перемещение ползунка сопровождается плавным смещением.
  • Цвет фона изменяется с анимацией.
  • Можно дополнительно управлять стилями активного и неактивного состояния через _before и _after псевдоэлементы.

Примеры сложного использования

Множественные переключатели с общим состоянием:

import { VStack, Switch } from "@chakra-ui/react";
import { useState } from "react";

const MultiSwitch = () => {
  const [settings, setSettings] = useState({
    notifications: true,
    darkMode: false,
  });

  const handleChange = (key) => (e) => {
    setSettings(prev => ({ ...prev, [key]: e.target.checked }));
  };

  return (
    <VStack align="start">
      <Switch
        isChecked={settings.notifications}
        onCha nge={handleChange("notifications")}
      >
        Уведомления
      </Switch>
      <Switch
        isChecked={settings.darkMode}
        onCha nge={handleChange("darkMode")}
      >
        Темная тема
      </Switch>
    </VStack>
  );
};
  • Используется VStack для вертикального выравнивания.
  • Состояние каждого переключателя хранится в объекте settings.

Поддержка доступности (Accessibility)

  • Switch автоматически поддерживает role="switch".
  • aria-checked отражает текущее состояние.
  • Использование FormLabel и id повышает совместимость с экранными читалками.

Резюме особенностей

  • Компонент предназначен для двухсостоянных переключателей.
  • Поддержка управляемого и неуправляемого режима.
  • Легкая интеграция с формами через FormControl и FormLabel.
  • Полная кастомизация через size, colorScheme, sx и псевдостили.
  • Встроенные анимации и поддержка доступности.

Chakra UI Switch позволяет создавать современные, интерактивные интерфейсы с минимальными усилиями, обеспечивая гибкость и консистентность дизайна.

Оглавление