Back to Radio Buttons-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

Radio buttons allow the selection of a single option from a set

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/radio-buttons@14.1.0

A paved road or a path?

Table of Contents

Edit this section, Opens in new window

Usage

Default

A paved road or a path?
A validation error A helpful text
<div class="if input-wrapper">
  <fieldset class="if">
    <legend class="if">A paved road or a path?</legend>
    <div class="if radio-buttons">
      <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>

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>

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>

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

Sizing

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

<form autocomplete="off">
  <div class="if input-wrapper">
    <div class="if radio-buttons">
      <input
        data-size="largest"
        checked
        class="if radio-button"
        id="radio-button-data-size-largest-toggle-1"
        type="radio"
      />
      <label data-speccer-measure="width bottom" class="if" for="radio-button-data-size-largest-toggle-1">Purple</label>
    </div>
  </div>
</form>
<form autocomplete="off">
  <div class="if input-wrapper">
    <div class="if radio-buttons">
      <input
        data-size="larger"
        checked
        class="if radio-button"
        id="radio-button-data-size-larger-toggle-1"
        type="radio"
      />
      <label data-speccer-measure="width bottom" class="if" for="radio-button-data-size-larger-toggle-1">Purple</label>
    </div>
  </div>
</form>
<form autocomplete="off">
  <div class="if input-wrapper">
    <div class="if radio-buttons">
      <input
        data-size="large"
        checked
        class="if radio-button"
        id="radio-button-data-size-large-toggle-1"
        type="radio"
      />
      <label data-speccer-measure="width bottom" class="if" for="radio-button-data-size-large-toggle-1">Purple</label>
    </div>
  </div>
</form>
<form autocomplete="off">
  <div class="if input-wrapper">
    <div class="if radio-buttons">
      <input
        data-size="medium"
        checked
        class="if radio-button"
        id="radio-button-data-size-medium-toggle-1"
        type="radio"
      />
      <label data-speccer-measure="width bottom" class="if" for="radio-button-data-size-medium-toggle-1">Purple</label>
    </div>
  </div>
</form>
<form autocomplete="off">
  <div class="if input-wrapper">
    <div class="if radio-buttons">
      <input
        data-size="small"
        checked
        class="if radio-button"
        id="radio-button-data-size-small-toggle-1"
        type="radio"
      />
      <label data-speccer-measure="width bottom" class="if" for="radio-button-data-size-small-toggle-1">Purple</label>
    </div>
  </div>
</form>
<form autocomplete="off">
  <div class="if input-wrapper">
    <div class="if radio-buttons">
      <input
        data-size="smallest"
        checked
        class="if radio-button"
        id="radio-button-data-size-smallest-toggle-1"
        type="radio"
      />
      <label data-speccer-measure="width bottom" class="if" for="radio-button-data-size-smallest-toggle-1"
        >Purple</label
      >
    </div>
  </div>
</form>
Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.0 (2021-11-09)

chore

  • πŸ€– Rename util to utils (f78721f)

Code Refactoring

  • πŸ’‘ Rename scope and repository (3ea5423)
  • πŸ’‘ Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • 🧨 Navigation structure has now changed. Please see release notes!

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

  • πŸ› Complete the pseudo-element fix (1dcee2c)

13.6.3 (2021-09-17)

Bug Fixes

13.5.1 (2021-09-07)

Bug Fixes

  • πŸ› Finalize data-size issue (f7f9f55), closes #374144
  • πŸ› Update and fix data sizing for form elements (5fbefb4), closes #374144
  • Use correct mixins and add missing mixins (1d440bd)

12.13.1 (2021-08-11)

Bug Fixes

  • πŸ› Whitelist docs dir for npm packaging (1a5cfd0), closes #457621

12.10.1 (2021-06-30)

Bug Fixes

  • πŸ› Use correct height for radio buttons (a9ac710), closes #432559

12.6.0 (2021-05-27)

Bug Fixes

  • πŸ› Manually set firstPublished and lastModified (e83af7d)
  • πŸ› We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Bug Fixes

  • πŸ› Use correct data size for largest (3357893)

Code Refactoring

  • πŸ’‘ Rename and consolidate mixins (67cf470), closes #268081
  • πŸ’‘ Rename crosslink buttons to Shortcuts (c05bf9c), closes #336508
  • πŸ’‘ Rename Dropdown to Dropdown Select (af1fc9d), closes #336508
  • πŸ’‘ Rename Footer to Global Footer (7cb7239), closes #336508
  • πŸ’‘ Rename Notification to Alert Banner (8b4e48d), closes #336508

Features

  • 🎸 Extract components from selection control (50607a4), closes #336508
  • 🎸 Rename and extract and update hero with no image to (384eb77), closes #336508

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Notification is now renamed to Alert Banner
  • 🧨 This extracts the Hero variation with no image into a separate, design

updated component named Header

  • 🧨 Footer is now renamed to Global Footer
  • 🧨 The Dropdown Component is now renamed to Dropdown Select. Dropdown is a

pattern.

  • 🧨 Crosslinks have seized to exist. They are all extracted into separate

components. This commit converts crosslink buttons into the new component Shortcuts

  • 🧨 Selection controls is no more. Has ceased to be. Bereft of life, it

rests in peace. This is an ex-component. The component is split into Radio Buttons, Toggle Control and Checkbox

Edit this section, Opens in new window
Contact us, Opens in new window