Skip to content

Radio Buttons13.10.5

Bundle


$ npm i @if-design-system/Radio buttons@13.10.5

To find out more about when to use selection controls, read this section in the style guide about selection control patterns.
A paved road or a path?
Edit this section

Overview

Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.

Edit this section

Usage

Radio Buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.

Labels

Always use a clear and concise label for radio buttons. Be explicit about the action that will follow if the radio button is selected. Labels appear to the right of radio buttons. Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized) and no more than three words.

Default selection

A set of radio buttons should default to having one option selected. Never display them without a default selection.

Sizing

With given attributes (data-size), you can vary the size of the Radio Button.

Largest
Larger
Large
Medium
Small
Smallest

Horizontal

Har du bonus i et annet selskap?
<fieldset class="if">
  <legend class="if">Har du bonus i et annet selskap?</legend>
  <div class="if input-wrapper">
    <div class="if radio-buttons [horizontal]">
      <input type="radio" id="radio-button-types-radio-help-1" class="if radio-button" name="radios" />
      <label for="radio-button-types-radio-help-1">Yes</label>
      <input type="radio" id="radio-button-types-radio-help-2" class="if radio-button" name="radios" />
      <label for="radio-button-types-radio-help-2">No</label>
    </div>
  </div>
</fieldset>

With help text

Har du bonus i et annet selskap?
Vi kan ikke se at du har bilforsikring i If fra før. Siden du ikke har oppparbeidet deg bonus, gir vi deg 40 % startbonus.
Har du bonus i et annet selskap?
Vi kan ikke se at du har bilforsikring i If fra før. Siden du ikke har oppparbeidet deg bonus, gir vi deg 40 % startbonus.
<fieldset class="if">
  <legend class="if">Har du bonus i et annet selskap?</legend>
  <div class="if input-wrapper">
    <div class="if radio-buttons horizontal">
      <input type="radio" id="radio-button-types-radio-horizontal-1" class="if radio-button" name="radios" />
      <label for="radio-button-types-radio-horizontal-1">Yes</label>
      <input type="radio" id="radio-button-types-radio-horizontal-2" class="if radio-button" name="radios" />
      <label for="radio-button-types-radio-horizontal-2">No</label>
    </div>
    <span class="if input-help">A helpful text</span>
  </div>
</fieldset>
Edit this section

Behaviours

States

Static
A helpful text
Static with help text
Checked
Disabled
Focused
Invalid
A validation error
Invalid with error message
Invalid + Focus
Checked + Focus
Checked + Invalid
Checked + Disabled

Modifiers

Standalone

If you want to use a Radio Button as a standalone component, i.e. just a Radio Button without label, use the .standalone-class.

<form autocomplete="off" style="width: 100%">
  <div class="if input-wrapper">
    <div class="if radio-buttons">
      <input
        checked
        type="radio"
        id="radio-standalone-radio2"
        class="if radio-button standalone"
        name="radio-standalone-radio2"
      />
      <label for="radio-standalone-radio2"></label>
    </div>
  </div>
</form>
Edit this section

Anatomy

A paved road or a path?
Radio buttons
  1. Legend (optional)
  2. Vertical radio buttons
  3. Clear and short label
A paved road or a path?
Horizontal radio buttons
  1. Legend (optional)
  2. Horizontal radio buttons
  3. Clear and short label
Edit this section

Implementation

[...]
<div class="if input-wrapper">
  <fieldset class="if">
    <legend class="if">A paved road or a path?</legend>
    <div class="if radio-buttons [horizontal]">
      <input checked type="radio" id="radio-buttons-implementation-radio-1" class="if radio-button" name="radios" />
      <label for="radio-buttons-implementation-radio-1">A duck</label>
      <input type="radio" id="radio-buttons-implementation-radio-2" class="if radio-button" name="radios" />
      <label for="radio-buttons-implementation-radio-2">A duck</label>
      <input type="radio" id="radio-buttons-implementation-radio-3" class="if radio-button" name="radios" />
      <label for="radio-buttons-implementation-radio-3">A duck</label>
      <span class="if input-error" aria-live="polite">A validation error</span>
      <span class="if input-help">A helpful text</span>
    </div>
  </fieldset>
</div>
[...]
Edit this section

Contact us