Checkbox

Captures boolean input with an optional indeterminate mode.

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.

Male

Want ice cream?

Join the group?


  <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.

Select All

Option 1

Option 2


  <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.

Small

Medium (Default)

Large


  <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.

Readonly checkbox

Readonly checked


  <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.

Disabled checkbox

Disabled checked


  <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.

Change Event?


      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');
      });