Skip to main contentSkip to site searchSkip to component search
Honeycomb

Checkbox

A component to select either none, one or multiple items.

There are 3 modifiers available for checkboxes:

flix-checkbox--disabled
adds disabled styles, don't forget to add the `disabled` attribute to the input field.
flix-checkbox--error
triggers an error appearance, use to highlight validation errors.
flix-checkbox--sm
makes a smaller checkbox.

You can display additional information that is related to the choice within flix-checkbox__info element, connecting it with the relevant input using an id and aria-describedby.

For groups of checkboxes it usually makes more sense to use flix-fieldset__info (see Radio component for more info).

This is required 
<div class="flix-checkbox">
    <input class="flix-checkbox__input" required="" aria-describedby="agreeing-is-required" type="checkbox" id="agree" value="agreed"/>
    <label class="flix-checkbox__label" for="agree">
        I accept the Terms and Conditions and Privacy Policy and agree with everything.
    </label>
    <span class="flix-checkbox__info" id="agreeing-is-required">
        This is required
    </span>
</div>

Checkbox States

Disabled

To disable a checkbox, add the disabled attribute to the input and the flix-checkbox--disabled modifier to the component wrapper.

<div class="flix-checkbox flix-checkbox--disabled">
    <input class="flix-checkbox__input" type="checkbox" disabled="" id="agree-disabled" value="agreed"/>
    <label class="flix-checkbox__label" for="agree-disabled">
        I wan&#x27;t to accept the Terms and Conditions and Privacy Policy and agree with everything, but I can&#x27;t...
    </label>
</div>

Invalid

When a form is submitted and returns an error you should:

  • Add flix-checkbox--error for visual clarity;
  • Add aria-invalid="true" to invalid checkboxes;
  • Add aria-live="assertive" and an id to the error message element, to ensure it is read by the screen reader as soon as the error occurs;
  • Connect the checkbox and its error message by passing the error message id to the aria-errormessage attribute on the input.
This is required 
<div class="flix-checkbox flix-checkbox--error">
    <input class="flix-checkbox__input" required="" aria-invalid="true" aria-errormessage="agree-error-message" type="checkbox" id="agree-error" value="agreed"/>
    <label class="flix-checkbox__label" for="agree-error">
        I have to accept the Terms and Conditions and Privacy Policy and agree with everything, but I didn&#x27;t.
    </label>
    <span class="flix-checkbox__info" id="agree-error-message" aria-live="assertive">
        This is required
    </span>
</div>

Indeterminate

On modern browsers the indeterminate state can be set with Javascript with

document.getElementById("my-checkbox-input-id").indeterminate = true

If you need to support older browsers, you can add/remove the flix-checkbox--indeterminate modifier with Javascript. One way how this could be done can be seen in the code example above.

For more info about the indeterminate state of checkboxes check this guide.

<div class="flix-form-row">
    <div class="flix-checkbox flix-checkbox--indeterminate">
        <input class="flix-checkbox__input" type="checkbox" id="example-checkbox-indeterminate" value="small-3"/>
        <label class="flix-checkbox__label" for="example-checkbox-indeterminate">I might accept the Terms and Conditions and Privacy Policy, but I am not sure.</label>
    </div>
</div>

Small checkbox

<div class="flix-checkbox flix-checkbox--sm">
    <input class="flix-checkbox__input" type="checkbox" id="example-small-checkbox" value="small"/>
    <label class="flix-checkbox__label" for="example-small-checkbox">Size doesn&#x27;t matter</label>
</div>

Other checkbox usages

In groups

We use flix-fieldset element in order to display checkbox groups.

It's possible to display controls in both vertical and horizontal manner.

By default, every element is placed on a new line, adding a flix-fieldset--horizontal modifier displays them horizontally in columns.

Want some pizza? 
<fieldset class="flix-fieldset flix-fieldset--horizontal">
    <legend id="checkbox-group-label" class="flix-legend">Want some pizza?</legend>
    <div class="flix-fieldset__item">
        <div class="flix-checkbox">
            <input class="flix-checkbox__input" type="checkbox" id="pepperoni" value="pepperoni"/>
            <label class="flix-checkbox__label" for="pepperoni">Pepperoni</label>
        </div>
    </div>
    <div class="flix-fieldset__item">
        <div class="flix-checkbox">
            <input class="flix-checkbox__input" type="checkbox" id="margarita" checked="" value="margarita"/>
            <label class="flix-checkbox__label" for="margarita">Margarita</label>
        </div>
    </div>
    <div class="flix-fieldset__item">
      <div class="flix-checkbox">
          <input class="flix-checkbox__input" type="checkbox" id="quattro-stagioni" checked="" value="Quattro Stagioni"/>
          <label class="flix-checkbox__label" for="quattro-stagioni">Quattro Stagioni</label>
      </div>
    </div>
</fieldset>

Invisible label

You can't remove the label from the checkbox, removing labels from inputs is not good for accessibility. To achieve this, you can wrap the text inside the label with span.flix-sr-only. This will visually hide the text but keep the text for screen readers.

Notice that this should be avoided since it makes the checkbox unclear for the user.

<div class="flix-checkbox">
    <input class="flix-checkbox__input" required="" type="checkbox" id="labeless" value="accept"/>
    <label class="flix-checkbox__label" for="labeless">
        <span class="flix-sr-only">I&#x27;m not sure of what exactly I&#x27;m accepting here and the designer should review their choice.</span>
    </label>
</div>