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="small">Small</wa-checkbox>
<br />
<wa-checkbox size="medium">Medium</wa-checkbox>
<br />
<wa-checkbox size="large">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 type="submit" variant="brand" 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>

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>

Importing Jump to heading #

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

import 'https://early.webawesome.com/webawesome@3.0.0-beta.2/dist/components/checkbox/checkbox.js';

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

import '@awesome.me/webawesome/dist/react/checkbox';