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

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

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

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