Toggle Checkbox
Form associated
A checkbox is a form control that allows users to select or deselect a single independent option.
It supports a binary state (checked or unchecked) and may optionally support an indeterminate state to represent a partial selection.
Usage
<label for="my-checkbox">Label</label><wcp-toggle-checkbox checked id="my-checkbox"></wcp-toggle-checkbox>Accessibility
All form controls must have an accessible label including checkboxes.
If a visible label cannot be used, an accessible name must be provided directly on the checkbox host element. This can be done by passing attributes such as aria-label or aria-labelledby.
See also the WAI-ARIA checkbox pattern.
API References
Methods
toggle()
Toggle the checked state.
Properties
checked
The checked state of the checkbox.
Accessors: Get, Set
Type: boolean
Default: false
required
Whether the checkbox is required.
Accessors: Get, Set
Type: boolean
Default: false
disabled
The disabled state of the checkbox.
Accessors: Get, Set
Type: boolean
Default: false
value
The checkbox value as a string, equivalent to checked.
Accessors: Get, Set
Type: "true" | "false"
controls
The elements controlled by this checkbox. When set, this checkbox acts as a “select all” controller.
Accessors: Get, Set
Type: ToggleCheckbox[]
Default: []
indeterminate
Whether the checkbox is in an indeterminate state, i.e. some but not all controlled checkboxes are checked.
Accessors: Get
name
Name used for form association and submission.
Accessors: Get, Set
Type: string
type
Accessors: Get
Type: string
Default: "checkbox"
Attributes
"controls"
Set the elements controlled by this checkbox. Pass checkboxes IDs space separated.
Type: string
"checked"
The checked state of the checkbox.
Type: boolean
"disabled"
The disabled state of the checkbox.
Type: boolean
"required"
Whether the checkbox is required.
Type: boolean
"name"
Name used for form association and submission.
Type: string
Events
clicked
Emitted when the checkbox is clicked.
Slots
unchecked-icon
The toggle checkbox unchecked icon element.
checked-icon
The toggle checkbox checked icon element.
mixed-icon
The toggle checkbox mixed icon element.
CSS Properties
--wcp-check-dur
The duration of the toggle animation.
--wcp-check-ease
The easing function used for the toggle animation.
--wcp-checkbox-sz
The size of the toggle checkbox.
--wcp-primary
The color of the toggle checkbox when it is checked.
--wcp-primary-content
The color of the checked icon.
--wcp-base-2
The background color of the toggle checkbox when it is unchecked.
--wcp-base-content
The color of the unchecked icon and the border color.
--wcp-bdr-sz-md
The size of the toggle checkbox border.
--wcp-base-1
The border color of the toggle checkbox when it is unchecked.
--wcp-bdr-rad-sm
The border radius of the toggle checkbox.
CSS Parts
::part(checkbox)
The toggle checkbox button element.
::part(background)
The toggle checkbox background span element.
::part(checked-icon)
The toggle checkbox checked icon element.
::part(mixed-icon)
The toggle checkbox mixed icon element.
CSS States
:state(--checked)
The checkbox is checked.
:state(--indeterminate)
The checkbox is indeterminate.
:state(--disabled)
The checkbox is disabled.