Checkbox

Checkboxes allow users to select one or more options from a set. Each checkbox can toggle between checked and unchecked states.

Usage

Import the component:

import 'mdui/components/checkbox.js';

Import the TypeScript type:

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

Example:

Checkbox

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

Use the unchecked-icon, checked-icon, and indeterminate-icon attributes to set Material Icons for the checkbox in unchecked, checked, and indeterminate states, respectively. Alternatively, use the corresponding slots for setting icons.

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>

Code

API

Properties

Attribute	Property	Type	Default
`disabled`	`disabled`	`boolean`	`false`
Dsiables the checkbox.
`checked`	`checked`	`boolean`	`false`
Sets the checkbox to the checked state.
	`defaultChecked`	`boolean`	`false`
Sets the default checked state. Resets to this state when the form is reset. Can only be set via JavaScript property.
`indeterminate`	`indeterminate`	`boolean`	`false`
Sets the checkbox to an indeterminate state.
`required`	`required`	`boolean`	`false`
Requires the checkbox to be checked for form submission.
`form`	`form`	`string`	-
Associates the checkbox with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the checkbox is associated with its parent `<form>`, if any. This attribute allows checkbox elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.
`name`	`name`	`string`	`''`
Sets the checkbox's name, which is submitted with form data.
`value`	`value`	`string`	`'on'`
Sets the checkbox's value, which is submitted with form data.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Sets the Material Icons name for the unchecked state. Alternatively, use `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
Sets the Material Icons name for the checked state. Alternatively, use `slot="checked-icon"`.
`indeterminate-icon`	`indeterminateIcon`	`string`	-
Sets the Material Icons name for the indeterminate state. Alternatively, use `slot="indeterminate-icon"`.
	`validity`	`ValidityState`	-
A `ValidityState` object that represents the element's validity states.
	`validationMessage`	`string`	-
The element's validation message. This is empty if the element meets its constraints.
`autofocus`	`autofocus`	`boolean`	`false`
Determines if the element should be focused when the page loads.
`tabindex`	`tabIndex`	`number`	-
Specifies the order in which the element receives focus when navigating with the Tab key.

Methods

Name	Parameters	Returns
`checkValidity`		`boolean`
Checks the validity of the form field. If it's invalid, it triggers an `invalid` event and returns `false`. If it's valid, it returns `true`.
`reportValidity`		`boolean`
Checks the validity of the form field. If it's invalid, it triggers an `invalid` event, returns `false`, and displays a validation message. If it's valid, it returns `true`.
`setCustomValidity`	`message: string`	`void`
Sets a custom error message. If the text is non-empty, it indicates that the field is invalid.
`click`		`void`
Simulates a mouse click on the element.
`focus`	`options: FocusOptions` (Optional)	`void`
Sets focus on the element. An optional parameter can be an object with a `preventScroll` property. If `preventScroll` is set to `true`, the page will not scroll to bring the focused element into view.
`blur`		`void`
Removes focus from the element.

Events

Name
`focus`
Emitted when the checkbox gains focus.
`blur`
Emitted when the checkbox loses focus.
`change`
Emitted when the checked state changes.
`input`
Emitted when the checked state changes.
`invalid`
Emitted when the form control's validity is checked and it doesn't meet the constraints.

Slots

Name
(default)
Text.
`unchecked-icon`
Icon for the unchecked state.
`checked-icon`
Icon for the checked state.
`indeterminate-icon`
Icon for the indeterminate state.

CSS Parts

Name
`control`
Container for the left icon.
`unchecked-icon`
Icon for the unchecked state.
`checked-icon`
Icon for the checked state.
`indeterminate-icon`
Icon for the indeterminate state.
`label`
Text.

Card

Up Next

Radio

Checkbox

Usage

Examples

Checked State

Disabled State

Indeterminate State

Icons

API

Properties

Methods

Events

Slots

CSS Parts