Usage
Checkboxes allow users to select one or more items from a set. Built with Material Design 3 specifications for smooth animations and clear visual states.
<wc-checkbox>Male</wc-checkbox>
<wc-checkbox value="true">Want ice cream?</wc-checkbox>
<wc-checkbox rounded="true">Join the group?</wc-checkbox>
Intermediate
The indeterminate state is useful when the checkbox represents a parent of a group of checkboxes, and some but not all children are selected.
<wc-checkbox indeterminate="true">Select All</wc-checkbox>
<wc-checkbox value="true">Option 1</wc-checkbox>
<wc-checkbox>Option 2</wc-checkbox>
Sizes
Checkboxes come in three sizes following Material Design 3 specifications: small (16px), medium (18px - default), and large (24px). All sizes include proper 40-48px touch targets for accessibility.
<wc-checkbox size="sm">Small</wc-checkbox>
<wc-checkbox size="md">Medium (Default)</wc-checkbox>
<wc-checkbox size="lg">Large</wc-checkbox>
Readonly
Readonly checkboxes display the current state without allowing user interaction. Unlike disabled, readonly checkboxes maintain full opacity. Add the readonly boolean attribute.
<wc-checkbox readonly="true">Readonly checkbox</wc-checkbox>
<wc-checkbox readonly="true" value="true">Readonly checked</wc-checkbox>
Disabled
Disabled checkboxes prevent user interaction and appear at 38% opacity following Material Design 3 guidelines. Add the disabled boolean attribute to disable the checkbox.
<wc-checkbox disabled="true">Disabled checkbox</wc-checkbox>
<wc-checkbox disabled="true" value="true">Disabled checked</wc-checkbox>
Events
The checkbox component emits custom events for user interactions. The change event is triggered when the checkbox value changes.
document.querySelector('#change-checkbox-field').addEventListener('change', function(event) {
console.log('Checkbox changed to:', event.detail.value);
console.log('Original event:', event.detail.originalEvent);
});
// Also available: focus and blur events
document.querySelector('#change-checkbox-field').addEventListener('focus', function(event) {
console.log('Checkbox focused');
});
On this page