1. Components
  2. Form controls

Radio field

A predefined set of mutually exclusive options, requiring the user to choose just one.

Default radio field orc-c-field

A predefined set of mutually exclusive options, requiring the user to choose just one.

Radio field error has-error

Shows that the radio field has an error.

Radio field valid is-valid

Shows that the selection was valid and registered.

Disabled radio field is-disabled

Shows the user that they can’t interact with the radio field.

  • 

    <div class="orc-c-field  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 orc-js-radio-trigger-parent">

        <label class="orc-c-input-group" for="radio-1">
                    <input id="radio-1" type="radio" name="radioname" value="" class="orc-c-input-group__control orc-js-radio-trigger" checked  >
                    <span class="orc-c-input-group__text">Option 1</span>
                </label>


      </li>
      <!-- end orc-c-radio-list__item -->
      <li class="orc-c-option-list__item orc-js-radio-trigger-parent">

        <label class="orc-c-input-group" for="radio-2">
                    <input id="radio-2" type="radio" name="radioname" value="" class="orc-c-input-group__control orc-js-radio-trigger"   >
                    <span class="orc-c-input-group__text">Option 2</span>
                </label>


      </li>
      <!-- end orc-c-radio-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-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 orc-js-radio-trigger-parent">

        <label class="orc-c-input-group" for="radio-3">
                    <input id="radio-3" type="radio" name="radionameerror" value="" class="orc-c-input-group__control orc-js-radio-trigger" checked  >
                    <span class="orc-c-input-group__text">Option 1</span>
                </label>


      </li>
      <!-- end orc-c-radio-list__item -->
      <li class="orc-c-option-list__item orc-js-radio-trigger-parent">

        <label class="orc-c-input-group" for="radio-4">
                    <input id="radio-4" type="radio" name="radionameerror" value="" class="orc-c-input-group__control orc-js-radio-trigger"   >
                    <span class="orc-c-input-group__text">Option 2</span>
                </label>


      </li>
      <!-- end orc-c-radio-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-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 orc-js-radio-trigger-parent">

        <label class="orc-c-input-group" for="radio-5">
                    <input id="radio-5" type="radio" name="radionamevalid" value="" class="orc-c-input-group__control orc-js-radio-trigger" checked  >
                    <span class="orc-c-input-group__text">Option 1</span>
                </label>


      </li>
      <!-- end orc-c-radio-list__item -->
      <li class="orc-c-option-list__item orc-js-radio-trigger-parent">

        <label class="orc-c-input-group" for="radio-6">
                    <input id="radio-6" type="radio" name="radionamevalid" value="" class="orc-c-input-group__control orc-js-radio-trigger"   >
                    <span class="orc-c-input-group__text">Option 2</span>
                </label>


      </li>
      <!-- end orc-c-radio-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-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 orc-js-radio-trigger-parent">

        <label class="orc-c-input-group" for="radio-7">
                    <input id="radio-7" type="radio" name="radionamedisabled" value="" class="orc-c-input-group__control orc-js-radio-trigger" checked disabled >
                    <span class="orc-c-input-group__text">Option 1</span>
                </label>


      </li>
      <!-- end orc-c-radio-list__item -->
      <li class="orc-c-option-list__item orc-js-radio-trigger-parent">

        <label class="orc-c-input-group" for="radio-8">
                    <input id="radio-8" type="radio" name="radionamedisabled" value="" class="orc-c-input-group__control orc-js-radio-trigger"  disabled >
                    <span class="orc-c-input-group__text">Option 2</span>
                </label>


      </li>
      <!-- end orc-c-radio-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 needs to make a single choice—a “pick only one” situation.

When to consider an alternative

If the user can select more than one option, use the checkbox field instead.

Class Name Description 
orc-c-field
Required

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

 
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 radio field has an error.

 
is-valid
Modifier

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

 
is-disabled
Modifier

Added to orc-c-field to show that the radio 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 radio items

 
orc-c-option-list
Required

List of radio options

 
orc-c-option-list__item
Required

Radio option list item within orc-c-option-list

 
orc-c-input-group
Required

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

 
orc-c-input-group__control
Required

Actual radio of the radio field. Apply orc-js-radio-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 radio

 
orc-c-field__note

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