Aileron

Radio: Disabled

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.

<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>