---
description: Элемент управления для хранения значений формы с множественным выбором.
---

# CheckBox

![CheckBox](https://72564723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXg0KhIlZk_bjQRk4u3%2Fuploads%2FmJkfu45Uuo7jLOglB4lc%2Fcheckbox.png?alt=media\&token=4d0aa96c-0006-40ce-afcb-e09bfe35676e)



## Основные данные&#x20;

Основной ресурс откуда взята информация - [https://ebay.gitbook.io/mindpatterns/input/checkbox](https://ebay.gitbook.io/mindpatterns/input/checkbox)

Позволяет выбрать ноль или более элементов в группе параметров. HTML дает нам встроенные флажки, которые полностью доступны по умолчанию. К сожалению, внешний вид этих элементов управления часто расходится с системой дизайна веб-сайта или рекомендациями по брендингу. Эта проблема усугубляется тем фактом, что встроенные флажки традиционно очень сложно изменить стиль. Наш шаблон показывает, как можно использовать современные CSS и SVG для создания настраиваемого фасада над собственными флажками, сохраняя при этом требования доступности.

## Терминология

*

## Лучшая практика



## Интерактивный дизайн



### Управление клавиатурой



### Screenreader



## Код



{% tabs %}
{% tab title="XML/HTML/SVG" %}
```markup
```
{% endtab %}

{% tab title="SCSS" %}
```
```
{% endtab %}
{% endtabs %}

Заголовок («Вы здесь») обычно скрывается за кадром с помощью класса .[clipped](https://danila-korotkov.gitbook.io/front-end-patterns/effekty-css-1/skryvat-blok-.clipped).

Хотя значок разделителя можно создать с помощью CSS, мы обнаружили, что встроенный SVG предлагает более доступный и гибкий подход.

## ARIA

*

