Checkbox
Checkboxes allow users to select one or more options from a set, or toggle a single binary choice. Supports indeterminate state for partial selection patterns.
Default
<diwa-checkbox label="Subscribe to newsletter" theme="dark"></diwa-checkbox>Checked
<diwa-checkbox label="Remember me" checked theme="dark"></diwa-checkbox>Indeterminate
Shown when only a subset of child options are selected. Renders a dash icon and sets aria-checked="mixed".
<diwa-checkbox label="Select all items" indeterminate theme="dark"></diwa-checkbox>Disabled
<diwa-checkbox label="Option unavailable" disabled theme="dark"></diwa-checkbox>Disabled + Checked
<diwa-checkbox label="Pre-selected (read-only)" checked disabled theme="dark"></diwa-checkbox>Error state
Shows a colored border and message when validation fails. Set state="error" and provide a message.
<diwa-checkbox label="Accept terms and conditions" required state="error" message="You must accept the terms to continue." theme="dark"></diwa-checkbox>Success state
Confirms a valid selection. Set state="success" with an optional confirmation message.
<diwa-checkbox label="Email verified" checked state="success" message="Your email address has been verified." theme="dark"></diwa-checkbox>Required
Adds a visual asterisk to the label. Combine with error state for form validation feedback.
<diwa-checkbox label="I agree to the privacy policy" required theme="dark"></diwa-checkbox>Compact
Enables dense mode. Reduces checkbox size from 20 px to 14 px for dense layouts such as data tables or sidebars.
<diwa-checkbox label="Compact density" compact theme="dark"></diwa-checkbox>Light theme
Per-component theme override — sets data-theme="light" on the host element.
<diwa-checkbox label="Light theme checkbox" theme="light"></diwa-checkbox>Select All — indeterminate group
Live example of the "Select All" pattern. The parent checkbox shows an indeterminate dash when only some children are selected. Clicking it toggles all children.