CheckboxЧекбокс

Чекбокс позволяет пользователю выбрать один или несколько вариантов из набора или переключить состояние отдельного параметра (вкл/выкл).

Использование

При необходимости импортируйте компонент:

import 'mdui/components/checkbox.js';

При необходимости импортируйте типы TypeScript:

import type { Checkbox } from 'mdui/components/checkbox.js';

Пример использования:

Checkbox

<mdui-checkbox>Checkbox</mdui-checkbox>

С помощью атрибутов unchecked-icon, checked-icon, indeterminate-icon можно задать иконки Material Icons для невыбранного, выбранного и неопределённого состояний соответственно. Также можно использовать слоты unchecked-icon, checked-icon, indeterminate-icon.

Checkbox

<mdui-checkbox
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Checkbox</mdui-checkbox>

<mdui-checkbox
  indeterminate
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Checkbox</mdui-checkbox>

<br/>

<mdui-checkbox>
  <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
  <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
  <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
  Checkbox
</mdui-checkbox>

<mdui-checkbox indeterminate>
  <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
  <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
  <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
  Checkbox
</mdui-checkbox>

Исходный код

API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`disabled`	`disabled`	`boolean`	`false`
Определяет, отключён ли чекбокс.
`checked`	`checked`	`boolean`	`false`
Определяет, установлен ли флажок.
	`defaultChecked`	`boolean`	`false`
Исходное состояние флажка. При сбросе формы оно восстанавливается. Это свойство задаётся только через JavaScript.
`indeterminate`	`indeterminate`	`boolean`	`false`
Определяет, находится ли в неопределённом состоянии.
`required`	`required`	`boolean`	`false`
Определяет, обязателен ли для отправки формы.
`form`	`form`	`string`	-
Связанный элемент `<form>`. В качестве значения укажите `id` элемента `<form>` на той же странице. Если свойство не задано, элемент должен быть дочерним по отношению к `<form>`. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри `<form>`.
`name`	`name`	`string`	`''`
Имя чекбокса, которое будет отправлено вместе с данными формы.
`value`	`value`	`string`	`'on'`
Значение чекбокса, которое будет отправлено вместе с данными формы.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Имя иконки Material Icons для неотмеченного состояния. Можно задать через `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
Имя иконки Material Icons для отмеченного состояния. Можно задать через `slot="checked-icon"`.
`indeterminate-icon`	`indeterminateIcon`	`string`	-
Имя иконки Material Icons для неопределённого состояния. Можно задать через `slot="indeterminate-icon"`.
	`validity`	`ValidityState`	-
Объект, содержащий состояние валидации формы. См. `ValidityState`.
	`validationMessage`	`string`	-
Если проверка формы не пройдена, это свойство содержит сообщение об ошибке. Если проверка пройдена, это свойство будет пустой строкой.
`autofocus`	`autofocus`	`boolean`	`false`
Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
`tabindex`	`tabIndex`	`number`	-
Порядок перехода к элементу при нажатии клавиши Tab.

Методы

Название	Параметры	Возвращаемое значение
`checkValidity`		`boolean`
Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает `false` и вызывает событие `invalid`; если прошло, возвращает `true`.
`reportValidity`		`boolean`
Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает `false` и вызывает событие `invalid`; если прошло, возвращает `true`. Если проверка не пройдена, также отображает сообщение об ошибке валидации в компоненте.
`setCustomValidity`	`message: string`	`void`
Устанавливает пользовательский текст сообщения об ошибке. Пока задан непустой текст, поле считается не прошедшим проверку.
`click`		`void`
Имитирует щелчок мыши по элементу.
`focus`	`options: FocusOptions` (Опционально)	`void`
Устанавливает фокус на текущий элемент. В качестве аргумента можно передать объект со свойством: `preventScroll`: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение `true`.
`blur`		`void`
Убирает фокус с текущего элемента.

События

Название
`focus`
Срабатывает при получении фокуса.
`blur`
Срабатывает при потере фокуса.
`change`
Срабатывает при изменении состояния флажка.
`input`
Срабатывает при изменении состояния флажка.
`invalid`
Возникает, когда поле формы не проходит валидацию.

Slots

Название
(по умолчанию)
Текст чекбокса.
`unchecked-icon`
Иконка неотмеченного состояния.
`checked-icon`
Иконка отмеченного состояния.
`indeterminate-icon`
Иконка неопределённого состояния.

CSS Parts

Название
`control`
Контейнер для иконки слева.
`unchecked-icon`
Иконка неотмеченного состояния.
`checked-icon`
Иконка отмеченного состояния.
`indeterminate-icon`
Иконка неопределённого состояния.
`label`
Текст чекбокса.

Предыдущая глава

Card Карточка

Следующая глава

Chip Чип

CheckboxЧекбокс

Использование

Примеры

Выбранное состояние

Отключённое состояние

Неопределённое состояние

Иконки

API

Свойства

Методы

События

Slots

CSS Parts