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.
Use wje-checkbox when users need to enter values, choose options, or trigger form-related actions.
Do not use it as a decorative element without interaction. Prefer presentational components in that case.
Always provide a label (label/aria-label), keep keyboard support, and surface clear validation feedback.
- Keep validation rules and error behavior consistent across the entire form.
- Show loading or disabled states during async operations.
- Split complex forms into smaller sections with immediate feedback.
| Description | Get checked attribute. |
| Attribute | checked |
| Type | boolean |
| Default | - |
| Description | Disables user interaction with the component. |
| Attribute | disabled |
| Type | any |
| Default | - |
| Description | Getter for the value attribute. |
| Attribute | value |
| Type | string |
| Default | - |
| Description | Retrieves the current state of the 'indeterminate' attribute. The 'indeterminate' attribute is typically used to signify a state where a checkbox is neither checked nor unchecked, such as a partially selected state. |
| Attribute | indeterminate |
| Type | boolean |
| Default | - |
| Description | Marks the component as required for form validation. |
| Attribute | required |
| Type | any |
| Default | - |
| Description | Controls validation or status messaging for invalid. |
| Attribute | invalid |
| Type | boolean |
| Default | false |
| Description | Getter for the label attribute. |
| Attribute | label |
| Type | string｜null |
| Default | - |
| Name | Description |
|---|
wje-toggle:input | Emitted when the input value changes. |
wje-toggle:change | Emitted when the component value changes. |
No public methods available for this component.
| Name | Description |
|---|
native | The component's native wrapper. |
| Name | Description |
|---|
--wje-checkbox-border-radius | Border radius of the component;. |
--wje-checkbox-border-width | Border width of the component;. |
--wje-checkbox-border-style | Border style of the component;. |
--wje-checkbox-border-color | Border color of the component;. |
--wje-checkbox-margin-inline | Margin inline of the component;. |
| Name | Description |
|---|
default | Default slot for the main component content. |