Компонент Checkbox — это стилизованный чекбокс с поддержкой двух вариантов оформления, неопределённого состояния (indeterminate), метки и состояний ошибки/блокировки.
- Основное назначение: выбор одного или нескольких элементов из набора.
- Ключевые возможности:
- Два варианта оформления:
basic (с заливкой) и outlined (контурный с галочкой). - Цветовая палитра.
- Неопределённое состояние (
indeterminate). - Поддержка
v-model, checked и defaultChecked. - Блокированное состояние (
disabled). - Нестилизованный режим (
unstyled). - Встроенная метка (
label) или внешняя через слот. - Атрибуты
data-disabled и data-indeterminate для стилизации.
| Проп | Тип | По умолчанию | Описание |
|---|
modelValue | Boolean | | Значение чекбокса (v-model). |
defaultChecked | Boolean | false | Начальное состояние в неконтролируемом режиме. |
variant | String | 'basic' | Вариант оформления. Возможные значения: 'basic', 'outlined'. |
color | String | 'primary' | Цвет чекбокса. Возможные значения: 'primary', 'secondary', 'info', 'success', 'warning', 'error'. |
type | String | 'checkbox' | HTML-тип поля. Можно изменить на 'radio' для создания радио-кнопок. |
label | String | | Текст метки. Если указан, чекбокс оборачивается в <label>. |
labelProps | Object | {} | Дополнительные атрибуты для элемента label. |
disabled | Boolean | false | Блокирует чекбокс. |
indeterminate | Boolean | false | Устанавливает неопределённое состояние (квадрат с минусом). |
unstyled | Boolean | false | Убирает все стили по умолчанию. |
className | String | | Дополнительные CSS-классы для поля ввода. |
classNames | Object | {} | Объект для кастомизации внутренних классов. Ключи: label, labelText, input. |
| Событие | Параметр | Описание |
|---|
update:modelValue | Boolean | Вызывается при изменении состояния чекбокса. |
change | Event | Вызывается при изменении состояния (нативное событие). |
| Атрибут | Значение | Условие |
|---|
data-disabled | 'true' | Чекбокс заблокирован. |
data-indeterminate | 'true' | Чекбокс в неопределённом состоянии. |
