Stylised Radio

To use when a user can make a single attribute choice. or single option from a list.

Description

Context

The Radio button is a base component and can be used within larger components and layouts.

Behaviour

The radio button inherits its colours from the secondary buttom. It has 5 states. The label should be included in the hit radius of the buttons

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-form-stylised-radio;

Usage

Usage example

Variations

The variations are modifier classes that can be applied on the default element.

form-stylised-radio--small

display smaller and more fittable version of stylised radio.

Code example

<div class="u-equal-grid">
  <div class="form-stylised-radio">
    <input id="form-radio-1" type="radio" name="default-radios">
    <label class="form-stylised-radio__label" for="form-radio-1">
      <span>6<br>long<br>months</span>
    </label>
  </div>

  <div class="form-stylised-radio">
    <input id="form-radio-2" type="radio" name="default-radios">
    <label class="form-stylised-radio__label" for="form-radio-2">
      <span>1<br>year</span>
    </label>
  </div>

  <div class="form-stylised-radio">
    <input id="form-radio-3" type="radio" name="default-radios">
    <label class="form-stylised-radio__label" for="form-radio-3">
      <span>2<br>years</span>
    </label>
  </div>

  <div class="form-stylised-radio">
    <input id="form-radio-4" type="radio" name="default-radios">
    <label class="form-stylised-radio__label" for="form-radio-4">
      <span>3<br>years</span>
    </label>
  </div>

  <div class="form-stylised-radio">
    <input id="form-radio-5" type="radio" name="default-radios">
    <label class="form-stylised-radio__label" for="form-radio-5">
      <span>4<br>years</span>
    </label>
  </div>

  <div class="form-stylised-radio">
    <input id="form-radio-6" type="radio" name="default-radios" disabled>
    <label class="form-stylised-radio__label" for="form-radio-6">
      <span>5<br>years</span>
    </label>
  </div>
</div>

<div class="u-pv-large">
  <hr class="divider" />
</div>

<div class="form-stylised-radio form-stylised-radio--small">
  <input id="form-radio-small-1" type="radio" name="small-radios">
  <label class="form-stylised-radio__label" for="form-radio-small-1">
    <span>0</span>
  </label>
</div>