shadow
A checkbox, or also a check box, is an element that allows users to select one or more options from a set. Click on the checkbox to change its status to true or false.
When the indeterminate attribute is added, a checkbox is displayed whose default state is neutral, i.e. neither true nor false.
Adding the variant attribute with the value circle will display a checkbox in a round shape.
| Description | If true, the checkbox is marked. |
| Attribute | checked |
| Type | boolean |
| Default | false |
| Description | If true, the checkbox is disabled. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| Description | The value of the check box. |
| Attribute | value |
| Type | boolean |
| Default | false |
| Description | If true, the checkbox is in an indeterminate state. |
| Attribute | indeterminate |
| Type | boolean |
| Default | false |
| Description | The name of the checkbox to submit the form. |
| Attribute | name |
| Type | string |
| Default | undefined |
| Description | Checkbox colour. Can be "primary", "complete", "success", "warning", "warning", or "info". |
| Attribute | color |
| Type | "primary." ｜ "complete" ｜ "success" ｜ "warning" ｜ "danger" ｜ "info" ｜ string ｜ undefined |
| Default | undefined |
| Description | The location of the checkbox relative to the text. Can be "end". |
| Attribute | placement |
| Type | "end" ｜ undefined |
| Default | undefined |
| Description | Checkbox variant. Can be "circle". |
| Attribute | Option |
| Type | "circle" ｜ undefined |
| Default | undefined |
| Name | Description |
|---|
wje-toggle:input | Called when the status of the checkbox changes (input event). |
wje-toggle:change | Fired when the checkbox state changes (change event). |
No public methods available for this component.
| Name | Description |
|---|
native | Refers to the native wrapper element of the checkbox |
| Name | Description |
|---|
--wje-checkbox-border-radius | Radius of roundness of the corners of the check box |
--wje-checkbox-border-width | Checkbox border width |
--wje-checkbox-border-style | Checkbox border style |
--wje-checkbox-border-color | Checkbox border colour |
--wje-checkbox-margin-top | Top indentation of checkbox |
--wje-checkbox-margin-bottom | Lower indentation of the checkbox |
--wje-checkbox-margin-inline | Side offset checkbox |
--wje-checkbox-size | Checkbox size |
--wje-checkbox-checkmark | Check icon in the checkbox |
--wje-checkbox-interminate | Indeterminate checkbox status icon |
| Name | Description |
|---|
| `` | The contents of the checkbox label. |