O3 World Component Library

Form Checkbox 

<form class="form">
    <fieldset class="input__wrapper">
        <legend class="h3">Checkbox Group</legend>
        <div class="custom-input__group">
            <div class="custom-input__check">
                <input type="checkbox" id="checkbox_cbg1_1" name="checkbox_cbg1" checked>
                <label for="checkbox_cbg1_1">Text file</label>
            </div>
            <!-- /.custom-input__check -->
            <div class="custom-input__check">
                <input type="checkbox" id="checkbox_cbg1_2" name="checkbox_cbg1">
                <label for="checkbox_cbg1_2">CSV file</label>
            </div>
            <!-- /.custom-input__check -->
            <div class="custom-input__check">
                <input type="checkbox" id="checkbox_cbg1_3" name="checkbox_cbg1">
                <label for="checkbox_cbg1_3">HTML file</label>
            </div>
            <!-- /.custom-input__check -->
        </div>
        <!-- /.custom-input__group -->
    </fieldset>
    <!-- /.input__wrapper -->
    <fieldset class="input__wrapper">
        <legend class="h3">Inline Checkbox Group</legend>
        <div class="custom-input__group custom-input__group--inline">
            <div class="custom-input__check">
                <input type="checkbox" id="checkbox_cbg2_1" name="checkbox_cbg2" checked>
                <label for="checkbox_cbg2_1">Text file</label>
            </div>
            <!-- /.custom-input__check -->
            <div class="custom-input__check">
                <input type="checkbox" id="checkbox_cbg2_2" name="checkbox_cbg2">
                <label for="checkbox_cbg2_2">CSV file</label>
            </div>
            <!-- /.custom-input__check -->
            <div class="custom-input__check">
                <input type="checkbox" id="checkbox_cbg2_3" name="checkbox_cbg2">
                <label for="checkbox_cbg2_3">HTML file</label>
            </div>
            <!-- /.custom-input__check -->
        </div>
        <!-- /.custom-input__group -->
    </fieldset>
    <!-- /.input__wrapper -->
    <fieldset class="input__wrapper">
        <legend class="h3">Hover State</legend>
        <div class="custom-input__group">
            <div class="custom-input__check">
                <input class="hovered" type="checkbox" id="checkbox-hover-sample" name="checkbox-hover-sample">
                <label for="checkbox-hover-sample">Text file</label>
            </div>
            <!-- /.custom-input__check -->
        </div>
        <!-- /.custom-input__group -->
    </fieldset>
    <!-- /.input__wrapper -->
    <fieldset class="input__wrapper">
        <legend class="h3">Focus State</legend>
        <div class="custom-input__group">
            <div class="custom-input__check">
                <input class="focused" type="checkbox" id="checkbox-focus-sample" name="checkbox-focus-sample">
                <label for="checkbox-focus-sample">Text file</label>
            </div>
            <!-- /.custom-input__check -->
        </div>
        <!-- /.custom-input__group -->
    </fieldset>
    <!-- /.input__wrapper -->
    <fieldset class="input__wrapper">
        <legend class="h3">Disabled State</legend>
        <div class="custom-input__group">
            <div class="custom-input__check">
                <input type="checkbox" id="checkbox-disabled-sample" name="checkbox-disabled-sample" disabled>
                <label for="checkbox-disabled-sample">Text file</label>
            </div>
            <!-- /.custom-input__check -->
        </div>
        <!-- /.custom-input__group -->
    </fieldset>
    <!-- /.input__wrapper -->
    <fieldset class="input__wrapper">
        <legend class="h3">Error State</legend>
        <div class="custom-input__group has-error">
            <div class="custom-input__check">
                <input type="checkbox" id="checkbox-disabled-sample" name="checkbox-disabled-sample">
                <label for="checkbox-disabled-sample">Text file</label>
            </div>
            <!-- /.custom-input__check -->
            <p class="input__error-message">This is a sample error message.</p>
        </div>
        <!-- /.custom-input__group -->
    </fieldset>
    <!-- /.input__wrapper -->
</form>
<!-- /.form -->
 
<form class="form">
  <fieldset class="input__wrapper">
    <legend class="h3">Checkbox Group</legend>
    <div class="custom-input__group">
      <div class="custom-input__check">
        <input type="checkbox" id="checkbox_cbg1_1" name="checkbox_cbg1" checked>
        <label for="checkbox_cbg1_1">Text file</label>
      </div>
      <!-- /.custom-input__check -->
      <div class="custom-input__check">
        <input type="checkbox" id="checkbox_cbg1_2" name="checkbox_cbg1">
        <label for="checkbox_cbg1_2">CSV file</label>
      </div>
      <!-- /.custom-input__check -->
      <div class="custom-input__check">
        <input type="checkbox" id="checkbox_cbg1_3" name="checkbox_cbg1">
        <label for="checkbox_cbg1_3">HTML file</label>
      </div>
      <!-- /.custom-input__check -->
    </div>
    <!-- /.custom-input__group -->
  </fieldset>
  <!-- /.input__wrapper -->
  <fieldset class="input__wrapper">
    <legend class="h3">Inline Checkbox Group</legend>
    <div class="custom-input__group custom-input__group--inline">
      <div class="custom-input__check">
        <input type="checkbox" id="checkbox_cbg2_1" name="checkbox_cbg2" checked>
        <label for="checkbox_cbg2_1">Text file</label>
      </div>
      <!-- /.custom-input__check -->
      <div class="custom-input__check">
        <input type="checkbox" id="checkbox_cbg2_2" name="checkbox_cbg2">
        <label for="checkbox_cbg2_2">CSV file</label>
      </div>
      <!-- /.custom-input__check -->
      <div class="custom-input__check">
        <input type="checkbox" id="checkbox_cbg2_3" name="checkbox_cbg2">
        <label for="checkbox_cbg2_3">HTML file</label>
      </div>
      <!-- /.custom-input__check -->
    </div>
    <!-- /.custom-input__group -->
  </fieldset>
  <!-- /.input__wrapper -->
  <fieldset class="input__wrapper">
    <legend class="h3">Hover State</legend>
    <div class="custom-input__group">
      <div class="custom-input__check">
        <input class="hovered" type="checkbox" id="checkbox-hover-sample" name="checkbox-hover-sample">
        <label for="checkbox-hover-sample">Text file</label>
      </div>
      <!-- /.custom-input__check -->
    </div>
    <!-- /.custom-input__group -->
  </fieldset>
  <!-- /.input__wrapper -->
  <fieldset class="input__wrapper">
    <legend class="h3">Focus State</legend>
    <div class="custom-input__group">
      <div class="custom-input__check">
        <input class="focused" type="checkbox" id="checkbox-focus-sample" name="checkbox-focus-sample">
        <label for="checkbox-focus-sample">Text file</label>
      </div>
      <!-- /.custom-input__check -->
    </div>
    <!-- /.custom-input__group -->
  </fieldset>
  <!-- /.input__wrapper -->
  <fieldset class="input__wrapper">
    <legend class="h3">Disabled State</legend>
    <div class="custom-input__group">
      <div class="custom-input__check">
        <input type="checkbox" id="checkbox-disabled-sample" name="checkbox-disabled-sample" disabled>
        <label for="checkbox-disabled-sample">Text file</label>
      </div>
      <!-- /.custom-input__check -->
    </div>
    <!-- /.custom-input__group -->
  </fieldset>
  <!-- /.input__wrapper -->
  <fieldset class="input__wrapper">
    <legend class="h3">Error State</legend>
    <div class="custom-input__group has-error">
      <div class="custom-input__check">
        <input type="checkbox" id="checkbox-disabled-sample" name="checkbox-disabled-sample">
        <label for="checkbox-disabled-sample">Text file</label>
      </div>
      <!-- /.custom-input__check -->
      <p class="input__error-message">This is a sample error message.</p>
    </div>
    <!-- /.custom-input__group -->
  </fieldset>
  <!-- /.input__wrapper -->
</form>
<!-- /.form -->
 
/* No context defined for this component. */

Usage

The checkbox element allows users to enter data into applications and websites. All checkbox elements should include the following states:

  • Hover state
  • Focus state
  • Disabled state
  • Error state

Labelling Expectations

  • All checkbox elements should be associated with a label.

Focus Expectations

  • All checkbox elements should have a visible keyboard focus state.

Keyboard Expectations

  • Tab = Move to next focusable form element
  • Enter or Space = Select checkbox

Screen Reader Expectations

When the checkbox element is focused, screen readers should announce the following:

  • Checkbox label
  • Input type