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.
This example shows the checkbox in its default state with a standard label. It is the best starting point for simple form choices.
This example moves the related content to the opposite side of the checkbox, which is useful in tighter or denser form layouts.
This example compares checkbox color variants so you can see how semantic states affect the overall visual tone.
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.
When you need to adjust the checkbox outline or spacing without changing markup, use the component CSS variables.
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 | Set checked attribute. |
| Attribute | checked |
| Type | boolean |
| Default | false |
| Description | Getter for the customErrorDisplay attribute. |
| Attribute | custom-error-display |
| Type | boolean |
| Default | false |
| Description | Disables user interaction with the component. |
| Attribute | disabled |
| Type | boolean |
| 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 | false |
| Description | Controls validation or status messaging for invalid. |
| Attribute | invalid |
| Type | boolean |
| Default | false |
| Description | Setter for the label attribute. |
| Attribute | label |
| Type | string |
| Default | - |
| Description | Marks the component as required for form validation. |
| Attribute | required |
| Type | boolean |
| Default | - |
| Description | Getter for the validateOnChange attribute. |
| Attribute | validate-on-change |
| Type | boolean |
| Default | false |
| Description | Getter for the value attribute. |
| Attribute | value |
| Type | string |
| Default | on |
| 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. |