3.0.0-alpha.11 Alpha
Native Styles

Checkbox

<input type=checkbox>

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

Want to do more? Check out the <wa-checkbox> component! 
<label><input type="checkbox"> Checkbox</label>

Examples

Checked

Use the checked attribute to activate the checkbox.

<label><input type="checkbox" checked> Checked</label>

Disabled

Use the disabled attribute to disable the checkbox.

<label><input type="checkbox" disabled> Disabled</label>

Custom Validity

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">
  <label><input type="checkbox"> Check me</label>
  <br />
  <button type="submit" variant="brand" style="margin-top: 1rem;">Submit</button>
</form>
<script>
  const form = document.querySelector('.custom-validity');
  const checkbox = form.querySelector('input[type=checkbox]');
  const errorMessage = `Don't forget to check me!`;

  // Set initial validity
  checkbox.setCustomValidity(errorMessage);

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

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

Opting In to Native Checkbox Styles

If you want to use the Native Checkbox styles without including the entirety of Web Awesome Native Styles, you can include the following CSS files from the Web Awesome CDN.

In HTML In CSS

Add the following code to the <head> of your page:

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.11/dist/styles/native/checkbox.css" />

Add the following code at the top of your CSS file:

@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.11/dist/styles/native/checkbox.css');

To use all of Web Awesome Native styles, follow the instructions on the Native Styles overview page.

    No results