Skip to main content

Checkboxes

Information: Documentation incomplete

This component still requires documentation.

Use the checkbox component to allow users to choose one or more options from a list of options.

Example

Default

Open example in a new window
View HTML 
<fieldset class="uhb-c-fieldset">
  <legend class="uhb-c-fieldset__legend">
    How would you like to be contacted?
  </legend>
  <ul class="uhb-c-checkbox">
    <li class="uhb-c-checkbox__item">
      <input class="uhb-c-checkbox__input" id="example-1" name="example" type="checkbox" value="email">
      <label class="uhb-c-label uhb-c-checkbox__label" for="example-1">
        Email
      </label>
    </li>
    <li class="uhb-c-checkbox__item">
      <input class="uhb-c-checkbox__input" id="example-2" name="example" type="checkbox" value="phone">
      <label class="uhb-c-label uhb-c-checkbox__label" for="example-2">
        Phone
      </label>
    </li>
    <li class="uhb-c-checkbox__item">
      <input class="uhb-c-checkbox__input" id="example-3" name="example" type="checkbox" value="text">
      <label class="uhb-c-label uhb-c-checkbox__label" for="example-3">
        Text
      </label>
    </li>
  </ul>
</fieldset>