Aileron

Radio

Storybook

Radio button

Allows a user to select one option while seeing all available options

Text label

Describe the user’s selection that will be submitted with the form

Types

  • Enabled or disabled
  • Required or optional
  • Error state

Usage Guidelines

  • A default option is always preselected
  • Used when 2 or more options are available
  • Used when the user needs to select a single option
  • The different options should be sorted logical order

Accessibility

Additional hidden text can be added to the label if context requires so.

<!-- Default -->
<div class="input-control-container">
    <input type="radio" name="rbGroup" id="rb1" value="xyz">
    <label for="rb1">
    <span class="input-control"></span>Radio label
  </label>
</div>


<!-- Error -->
<div class="input-control-container error">
    <input type="radio" name="rbGroup" id="rb1-error" value="xyz">
    <label for="rb1-error">
    <span class="input-control"></span>Radio label - error
      <span class="show-for-sr">Radio error message</span>
  </label>
    <span class="error-message" aria-hidden="true">Radio error message</span>
</div>


<!-- Disabled -->
<div class="input-control-container">
    <input type="radio" name="rbGroup" id="rb1-disabled" value="xyz" disabled>
    <label for="rb1-disabled">
    <span class="input-control"></span>Radio label - disabled
  </label>
</div>