---
description: Переключатель, позволяющий пользователям выбрать между парой противоположных состояний, например, включено/выключено.
tags: selection
---

<Overview group="forms">

# Switch [tag:component]

Переключатель, позволяющий пользователям выбрать между парой противоположных состояний,
например, включено/выключено.
Наследует все свойства нативного `<input type="checkbox">` с дополнительными возможностями кастомизации.

</Overview>

{/* @example-description: Базовый переключатель `Switch`. */}
<Playground>
  ```jsx
  <Switch />
  ```
</Playground>

## Режим работы

Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение
React-компонентов, прочитать про это можно в [документации React](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable).

Для использования неконтролируемого режима достаточно просто _не_ передавать `checked` или передавать `defaultChecked`, если
требуется задать значение по умолчанию.
Для контролируемого режима используйте связку свойств `checked`/`onChange` для задания значения и его изменения.

```jsx
// Неконтролируемое состояние, по умолчанию в состоянии "выбран"
<Switch defaultChecked />;

// Контролируемое состояние, значение "не выбран"
const [checked, setChecked] = React.useState(false);

<Switch checked={checked} onChange={(event) => setChecked(event.target.checked)} />;
```

## Состояния

### `disabled`

Свойство `disabled` блокирует взаимодействие с компонентом и добавляет визуальную индикацию недоступности.

{/* @example-description: Пример неактивного `Switch` в состоянии `disabled`. */}
<Playground>
  ```jsx
  <Switch defaultChecked disabled />
  ```
</Playground>

## Кастомизация

Компонент поддерживает свойство `slotProps`, позволяющее переопределять свойства внутренних элементов, таких как корневой контейнер и скрытый `input`.

Это удобно для добавления кастомных классов, data-атрибутов, aria-атрибутов, обработчиков событий, доступов к элементам через `getRootRef` и других расширений, не влияя на внешний API компонента.

{/* @example-description: Кастомизация `Switch` через `slotProps` для корня и внутреннего `input`. */}
<Playground>
  ```jsx
  const inputRef = React.useRef();

  return (
    <Switch
      defaultChecked
      className="my-root-class"
      data-testid="switch-root"
      id="switch-input-id"
      slotProps={{
        root: {
          id: 'switch-root-id',
        },
        input: {
          className: 'my-input-class',
          'aria-label': 'switch',
          getRootRef: inputRef,
        },
      }}
    />
  )
  ```
</Playground>

## Доступность (a11y) [#a11y]

Доступность реализована на основе рекомендаций из [Switch WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/).

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `getRef` | `Ref<HTMLInputElement>` | `-` | **Deprecated**: Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`. |
| `getRootRef` | `Ref<HTMLLabelElement>` | `-` |  |
| `slotProps` | `{ root?: (Omit<LabelHTMLAttributes<HTMLLabelElement>, "children"> & HasRootRef<HTMLLabelElement> & HasDataAttribute); input?: (InputHTMLAttributes<...> & ... 1 more ... & HasDataAttribute) \| undefined; } \| undefined` | `-` | Свойства, которые можно прокинуть внутрь компонента: - `root`: свойства для прокидывания в корень компонента; - `input`: свойства для прокидывания в скрытый `input`. |