---
description: Компонент, который представляет собой базовую обертку для переключателей (checkbox, radio, switch).
tags: selection
---

<Overview group="utils">

# SelectionControl [tag:component]

Компонент, который представляет собой базовую обертку для переключателей (`checkbox`, `radio`, `switch`).
Лежит в основе таких компонентов как [`Radio`](/components/radio), [`Checkbox`](/components/checkbox) и [`Switch`](/components/switch).

</Overview>

{/* @example-description: Базовый `SelectionControl` с `Checkbox.Input` и текстовой меткой. */}
<Playground>
  ```jsx
  <SelectionControl>
    <Checkbox.Input />
    <SelectionControl.Label>Согласен</SelectionControl.Label>
  </SelectionControl>
  ```
</Playground>

## Применение компонента

> **Обратите внимание**
>
> Если вам не нужна дополнительная стилизация или специфичное поведение, то используйте компоненты [`Radio`](/components/radio),
> [`Checkbox`](/components/checkbox) или [`Switch`](/components/switch) напрямую. Они покрывают все базовые потребности пользователя
> и стилизованы под дизайн-систему VKUI.

С помощью данного компонента можно более гибко контролировать поведение и стилизацию всех типов переключателей.
Может быть полезно, если вы хотите задать специфичную цветовую тему компонентов или изменить порядок
текстовых элементов.

## Структура

Компонент `SelectionControl` служит обёрткой для всего контента.

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

Также в `SelectionControl` необходимо вложить нужный переключатель, для этого используйте соответствующие компоненты `Checkbox.Input`,
`Radio.Input` или `Switch`.

Переключатели и подкомпонент `SelectionControl.Label` можно располагать в любом порядке.

import { BlockWrapper } from '@/components/wrappers';

{/* @example-description: Варианты `SelectionControl` с `Checkbox`, `Radio` и `Switch` в разных компоновках. */}
<Playground Wrapper={BlockWrapper} style={{ width: 270 }}>
  ```jsx
  <SelectionControl>
    <Checkbox.Input />
    <SelectionControl.Label titleAfter={<Icon12Lock />}>Заголовок</SelectionControl.Label>
  </SelectionControl>
  <SelectionControl>
    <Radio.Input />
    <SelectionControl.Label description="Описание">Заголовок</SelectionControl.Label>
  </SelectionControl>
  <SelectionControl>
    <SelectionControl.Label description="Описание">Заголовок</SelectionControl.Label>
    <Switch />
  </SelectionControl>
  ```
</Playground>

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

### SelectionControl

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `activeMode` | `StateModeLiteral` | `-` | Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `-` |  |
| `focusVisibleMode` | `FocusVisibleMode` | `-` | Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible |
| `getRootRef` | `Ref<HTMLLabelElement>` | `-` |  |
| `hasActive` | `boolean` | `-` | Указывает, должен ли компонент реагировать на `active`-состояние. |
| `hasHover` | `boolean` | `-` | Указывает, должен ли компонент реагировать на `hover`-состояние. |
| `hoverMode` | `StateModeLiteral` | `-` | Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. |
| `noPadding` | `boolean` | `false` | Отключает отступы. При использовании этого свойства, значение по умолчанию для свойств `hoverMode` и `activeMode` становится `"opacity"`. |

### SelectionControl.Label

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `description` | `ReactNode` | `-` |  |
| `titleAfter` | `ReactNode` | `-` |  |