Checkbox

Checkboxes allow the user to toggle an option on or off.

<wa-checkbox>Checkbox</wa-checkbox>

Examples Jump to heading

Checked Jump to heading

Use the checked attribute to activate the checkbox.

<wa-checkbox checked>Checked</wa-checkbox>

Indeterminate Jump to heading

Use the indeterminate attribute to make the checkbox indeterminate.

<wa-checkbox indeterminate>Indeterminate</wa-checkbox>

Disabled Jump to heading

Use the disabled attribute to disable the checkbox.

<wa-checkbox disabled>Disabled</wa-checkbox>

Sizes Jump to heading

Use the size attribute to change a checkbox's size.

<wa-checkbox size="xs">Extra Small</wa-checkbox>
<br />
<wa-checkbox size="s">Small</wa-checkbox>
<br />
<wa-checkbox size="m">Medium</wa-checkbox>
<br />
<wa-checkbox size="l">Large</wa-checkbox>
<br />
<wa-checkbox size="xl">Extra Large</wa-checkbox>

Hint Jump to heading

Add descriptive hint to a switch with the hint attribute. For hints that contain HTML, use the hint slot instead.

<wa-checkbox hint="What should the user know about the checkbox?">Label</wa-checkbox>

Custom Validity Jump to heading

Use the setCustomValidity() method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.

<form class="custom-validity">
  <wa-checkbox>Check me</wa-checkbox>
  <br />
  <wa-button appearance="filled" type="submit" variant="neutral" style="margin-top: 1rem;">Submit</wa-button>
</form>
<script>
  const form = document.querySelector('.custom-validity');
  const checkbox = form.querySelector('wa-checkbox');
  const errorMessage = `Don't forget to check me!`;

  // Set initial validity as soon as the element is defined
  customElements.whenDefined('wa-checkbox').then(async () => {
    await checkbox.updateComplete;
    checkbox.setCustomValidity(errorMessage);
  });

  // Update validity on change
  checkbox.addEventListener('change', () => {
    checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
  });

  // Handle submit
  customElements.whenDefined('wa-checkbox').then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      alert('All fields are valid!');
    });
  });
</script>

Importing Jump to heading

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

import 'https://ka-f.webawesome.com/webawesome@0.14.0/components/checkbox/checkbox.js';

import '@awesome.me/webawesome/dist/components/checkbox/checkbox.js';

import './webawesome/dist/components/checkbox/checkbox.js';

import WaCheckbox from '@awesome.me/webawesome/dist/react/checkbox/index.js';

Slots Jump to heading

Learn more about using slots.

Attributes & Properties Jump to heading

Learn more about attributes and properties.

Methods Jump to heading

Learn more about methods.

Events Jump to heading

Learn more about events.

CSS custom properties Jump to heading

Learn more about CSS custom properties.

Custom States Jump to heading

Learn more about custom states.

CSS parts Jump to heading

Learn more about CSS parts.

Dependencies Jump to heading

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

• <wa-icon>