@3mo/checkbox
v1.2.2
Published
A web component for labelled checkboxes with an indeterminate state, built on Material Web.
Readme
Checkbox
A web component for labelled checkboxes with an indeterminate state, built on Material Web.
A checkbox with an optional label, which can also show a partial selection.
Installation
npm install @3mo/checkboximport '@3mo/checkbox'Usage
<mo-checkbox label='Remember me'></mo-checkbox>Examples
- States —
selectedistrue,falseor'indeterminate', which shows a dash for a partial selection. - Without Label — Without a
labelonly the box is rendered, for tables and toolbars. - Long Label — A long label wraps, and the box stays aligned with its first line.
- Custom Properties —
--mo-checkbox-accent-colorcolors the selected box,--mo-checkbox-disabled-colora disabled one.
API
mo-checkbox
Properties
| Name | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
| label | label | string | "" | The label of the checkbox. |
| disabled | disabled | boolean | false | Whether the checkbox is disabled or not. |
| selected | selected | CheckboxSelection | false | Whether the checkbox is selected or not. This can be set to 'indeterminate' to show a dash instead of a check-mark. |
Events
| Name | Detail | Description |
| --- | --- | --- |
| change | CheckboxSelection | Dispatched when the selection state of the checkbox changes. |
CSS custom properties
| Name | Description |
| --- | --- |
| --mo-checkbox-accent-color | The color of the selected box, its focus ring and its state layer |
| --mo-checkbox-disabled-color | The color of a disabled checkbox and its label |
Links
License
MIT © 3MO GmbH
