O3 World Component Library

Form Radio Button 

<form class="form">
    <fieldset class="input__wrapper">
        <legend class="h3">Radio Button Group</legend>
        <div class="custom-input__group">
            <div class="custom-input__radio">
                <input type="radio" id="radio_rbg1_1" name="radio_rbg1" checked>
                <label for="radio_rbg1_1">Text file</label>
            </div>
            <!-- /.custom-input__radio -->
            <div class="custom-input__radio">
                <input type="radio" id="radio_rbg1_2" name="radio_rbg1">
                <label for="radio_rbg1_2">CSV file</label>
            </div>
            <!-- /.custom-input__radio -->
            <div class="custom-input__radio">
                <input type="radio" id="radio_rbg1_3" name="radio_rbg1">
                <label for="radio_rbg1_3">HTML file</label>
            </div>
            <!-- /.custom-input__radio -->
        </div>
        <!-- /.custom-input__group -->
    </fieldset>
    <!-- /.input__wrapper -->
    <fieldset class="input__wrapper">
        <legend class="h3">Inline Radio Button Group</legend>
        <div class="custom-input__group custom-input__group--inline">
            <div class="custom-input__radio">
                <input type="radio" id="radio_rbg2_1" name="radio_rbg2" checked>
                <label for="radio_rbg2_1">Text file</label>
            </div>
            <!-- /.custom-input__radio -->
            <div class="custom-input__radio">
                <input type="radio" id="radio_rbg2_2" name="radio_rbg2">
                <label for="radio_rbg2_2">CSV file</label>
            </div>
            <!-- /.custom-input__radio -->
            <div class="custom-input__radio">
                <input type="radio" id="radio_rbg2_3" name="radio_rbg2">
                <label for="radio_rbg2_3">HTML file</label>
            </div>
            <!-- /.custom-input__radio -->
        </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__radio">
                <input class="hovered" type="radio" id="radio_rbg2_1" name="radio_rbg2">
                <label for="radio_rbg2_1">Text file</label>
            </div>
            <!-- /.custom-input__radio -->
        </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__radio">
                <input class="focused" type="radio" id="radio_rbg2_1" name="radio_rbg2">
                <label for="radio_rbg2_1">Text file</label>
            </div>
            <!-- /.custom-input__radio -->
        </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__radio">
                <input type="radio" id="radio_rbg2_1" name="radio_rbg2" disabled>
                <label for="radio_rbg2_1">Text file</label>
            </div>
            <!-- /.custom-input__radio -->
        </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__radio">
                <input type="radio" id="radio_rbg2_1" name="radio_rbg2">
                <label for="radio_rbg2_1">Text file</label>
            </div>
            <!-- /.custom-input__radio -->
            <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">Radio Button Group</legend>
    <div class="custom-input__group">
      <div class="custom-input__radio">
        <input type="radio" id="radio_rbg1_1" name="radio_rbg1" checked>
        <label for="radio_rbg1_1">Text file</label>
      </div>
      <!-- /.custom-input__radio -->
      <div class="custom-input__radio">
        <input type="radio" id="radio_rbg1_2" name="radio_rbg1">
        <label for="radio_rbg1_2">CSV file</label>
      </div>
      <!-- /.custom-input__radio -->
      <div class="custom-input__radio">
        <input type="radio" id="radio_rbg1_3" name="radio_rbg1">
        <label for="radio_rbg1_3">HTML file</label>
      </div>
      <!-- /.custom-input__radio -->
    </div>
    <!-- /.custom-input__group -->
  </fieldset>
  <!-- /.input__wrapper -->
  <fieldset class="input__wrapper">
    <legend class="h3">Inline Radio Button Group</legend>
    <div class="custom-input__group custom-input__group--inline">
      <div class="custom-input__radio">
        <input type="radio" id="radio_rbg2_1" name="radio_rbg2" checked>
        <label for="radio_rbg2_1">Text file</label>
      </div>
      <!-- /.custom-input__radio -->
      <div class="custom-input__radio">
        <input type="radio" id="radio_rbg2_2" name="radio_rbg2">
        <label for="radio_rbg2_2">CSV file</label>
      </div>
      <!-- /.custom-input__radio -->
      <div class="custom-input__radio">
        <input type="radio" id="radio_rbg2_3" name="radio_rbg2">
        <label for="radio_rbg2_3">HTML file</label>
      </div>
      <!-- /.custom-input__radio -->
    </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__radio">
        <input class="hovered" type="radio" id="radio_rbg2_1" name="radio_rbg2">
        <label for="radio_rbg2_1">Text file</label>
      </div>
      <!-- /.custom-input__radio -->
    </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__radio">
        <input class="focused" type="radio" id="radio_rbg2_1" name="radio_rbg2">
        <label for="radio_rbg2_1">Text file</label>
      </div>
      <!-- /.custom-input__radio -->
    </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__radio">
        <input type="radio" id="radio_rbg2_1" name="radio_rbg2" disabled>
        <label for="radio_rbg2_1">Text file</label>
      </div>
      <!-- /.custom-input__radio -->
    </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__radio">
        <input type="radio" id="radio_rbg2_1" name="radio_rbg2">
        <label for="radio_rbg2_1">Text file</label>
      </div>
      <!-- /.custom-input__radio -->
      <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 radio button element allows users to enter data into applications and websites. All radio button elements should include the following states:

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

Labelling Expectations

  • All radio button elements should be associated with a label.

Focus Expectations

  • All radio button elements should have a visible keyboard focus state.

Keyboard Expectations

  • Tab = Move to next focusable form element
  • ← → = Cycle through radio button group

Screen Reader Expectations

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

  • Radio button label
  • Input type