1. Components
  2. Form controls

Checkbox field

An intuitive field that lets users turn controls on or off.

Default checkbox field orc-c-field

An intuitive field that lets users turn controls on or off.

Checkbox field error has-error

Lets the user know that their selection can’t be registered in our system.

Checkbox field valid is-valid

Lets the user know that their selection is valid and was registered.

Disabled checkbox field is-disabled

Shows the user that they can’t interact with the checkbox.

  • 

    <div class="orc-c-field orc-c-field--checkbox  orc-js-field">

  <h4 for="" class="orc-c-field__label">Label</h4>

  <div class="orc-c-field__body">

    <ul class="orc-c-option-list">

      <li class="orc-c-option-list__item">

        <label class="orc-c-input-group" for="check-1">
                    <input id="check-1" type="checkbox" name="checkname" value="" title="The Cosmopolitan Las Vegas" class="orc-c-input-group__control orc-js-checkbox-trigger" checked   >
                    <span class="orc-c-input-group__text">Option 1</span>
                </label>

      </li>
      <!-- end orc-c-option-list__item -->
      <li class="orc-c-option-list__item">

        <label class="orc-c-input-group" for="check-2">
                    <input id="check-2" type="checkbox" name="checkname" value="" title="The Cosmopolitan Las Vegas" class="orc-c-input-group__control orc-js-checkbox-trigger"    >
                    <span class="orc-c-input-group__text">Option 2</span>
                </label>

      </li>
      <!-- end orc-c-option-list__item -->

    </ul>
    <!-- end orc-c-option-list -->

  </div>
  <!-- end orc-c-field__body -->

  <div class="orc-c-field__note orc-js-field-note">This is a note about the field</div>

</div>
<!--end orc-c-field-->
    

  • 

    <div class="orc-c-field orc-c-field--checkbox orc-has-error orc-js-field">

  <h4 for="" class="orc-c-field__label">Label</h4>

  <div class="orc-c-field__body">

    <ul class="orc-c-option-list">

      <li class="orc-c-option-list__item">

        <label class="orc-c-input-group" for="check-3">
                    <input id="check-3" type="checkbox" name="checknameerror" value="" title="The Cosmopolitan Las Vegas" class="orc-c-input-group__control orc-js-checkbox-trigger" checked   >
                    <span class="orc-c-input-group__text">Option 1</span>
                </label>

      </li>
      <!-- end orc-c-option-list__item -->
      <li class="orc-c-option-list__item">

        <label class="orc-c-input-group" for="check-4">
                    <input id="check-4" type="checkbox" name="checknameerror" value="" title="The Cosmopolitan Las Vegas" class="orc-c-input-group__control orc-js-checkbox-trigger"    >
                    <span class="orc-c-input-group__text">Option 2</span>
                </label>

      </li>
      <!-- end orc-c-option-list__item -->

    </ul>
    <!-- end orc-c-option-list -->

  </div>
  <!-- end orc-c-field__body -->

  <div class="orc-c-field__note orc-js-field-note">This is an invalid message</div>

</div>
<!--end orc-c-field-->
    

  • 

    <div class="orc-c-field orc-c-field--checkbox orc-is-valid orc-js-field">

  <h4 for="" class="orc-c-field__label">Label</h4>

  <div class="orc-c-field__body">

    <ul class="orc-c-option-list">

      <li class="orc-c-option-list__item">

        <label class="orc-c-input-group" for="check-7">
                    <input id="check-7" type="checkbox" name="checknamevalid" value="" title="The Cosmopolitan Las Vegas" class="orc-c-input-group__control orc-js-checkbox-trigger" checked   >
                    <span class="orc-c-input-group__text">Option 1</span>
                </label>

      </li>
      <!-- end orc-c-option-list__item -->
      <li class="orc-c-option-list__item">

        <label class="orc-c-input-group" for="check-8">
                    <input id="check-8" type="checkbox" name="checknamevalid" value="" title="The Cosmopolitan Las Vegas" class="orc-c-input-group__control orc-js-checkbox-trigger"    >
                    <span class="orc-c-input-group__text">Option 2</span>
                </label>

      </li>
      <!-- end orc-c-option-list__item -->

    </ul>
    <!-- end orc-c-option-list -->

  </div>
  <!-- end orc-c-field__body -->

  <div class="orc-c-field__note orc-js-field-note">This is a valid message</div>

</div>
<!--end orc-c-field-->
    

  • 

    <div class="orc-c-field orc-c-field--checkbox orc-is-disabled orc-js-field">

  <h4 for="" class="orc-c-field__label">Label</h4>

  <div class="orc-c-field__body">

    <ul class="orc-c-option-list">

      <li class="orc-c-option-list__item">

        <label class="orc-c-input-group" for="check-5">
                    <input id="check-5" type="checkbox" name="checknamedisabled" value="" title="The Cosmopolitan Las Vegas" class="orc-c-input-group__control orc-js-checkbox-trigger" checked  disabled >
                    <span class="orc-c-input-group__text">Option 1</span>
                </label>

      </li>
      <!-- end orc-c-option-list__item -->
      <li class="orc-c-option-list__item">

        <label class="orc-c-input-group" for="check-6">
                    <input id="check-6" type="checkbox" name="checknamedisabled" value="" title="The Cosmopolitan Las Vegas" class="orc-c-input-group__control orc-js-checkbox-trigger"   disabled >
                    <span class="orc-c-input-group__text">Option 2</span>
                </label>

      </li>
      <!-- end orc-c-option-list__item -->

    </ul>
    <!-- end orc-c-option-list -->

  </div>
  <!-- end orc-c-field__body -->

  <div class="orc-c-field__note orc-js-field-note">This is a disabled message</div>

</div>
<!--end orc-c-field-->

Usage

When to use

Use this when the user can select more than one option—a “check all that apply” situation.

When to consider an alternative

If the user may only choose one, a radio field is your best choice. If the user has only one option that they can opt in or out of, use an inline checkbox.

Class Name Description 
orc-c-field
Required

Apply to the checkbox field’s containing HTML element. This contains the field label, field body, and field note.

 
orc-c-field--checkbox
Required

Added to orc-c-field to specify that this is a checkbox field.

 
orc-js-field
JS

Added to orc-c-field so that JavaScript can target this element.

 
has-error
Modifier

Added to orc-c-field to show that the checkbox field has an error.

 
is-valid
Modifier

Added to orc-c-field to show that the checkbox field is valid.

 
is-disabled
Modifier

Added to orc-c-field to show that the checkbox field is disabled. The inputs also need to contain a disabled attribute to turn off any selecting/deselecting functionality.

 
orc-c-field__label
Required

Word or short phrase applied to an <h4> element that labels the contents of the orc-c-field__body

 
orc-c-field__body
Required

Container used to house the checkbox items

 
orc-c-option-list
Required

List of checkbox options

 
orc-c-option-list__item
Required

Checkbox option list item within orc-c-option-list

 
orc-c-input-group
Required

Input group consisting of a checkbox input and text describing the checkbox option. This is applied to a <label> tag so that a user can click the text next to the checkbox and still select/deselect the checkbox item.

 
orc-c-input-group__control
Required

Actual checkbox of the checkbox field. Apply orc-js-checkbox-trigger if you care to target this element using JavaScript.

 
orc-c-input-group__text
Required

Input group control’s text label that sits next to the checkbox

 
orc-c-field__note

Short excerpt that adds additional directions or context to the checkbox field. orc-js-field-note is applied for HTML form validation to print out a message when an error occurs.