Radio

Use to select a 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 button. It has 5 states. For more than two options, radio buttons should be stacked. 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-radio;

Subcategories

Usage

  1. HTML
  2. React
<div>
  <label class="form-radio" for="form-radio-1">
    <input class="form-radio__input" id="form-radio-1" type="radio" checked name="default-radios">
    <span class="form-radio__icon"></span>
    Label is optional!
  </label>

  <label class="form-radio" for="form-radio-2">
    <input class="form-radio__input" id="form-radio-2" type="radio" name="default-radios">
    <span class="form-radio__icon"></span>
    Click me!
  </label>
</div>

<div class="u-horizontal-children">
  <label class="form-radio" for="form-radio-3">
    <input class="form-radio__input" id="form-radio-3" type="radio" name="horizontal-radios">
    <span class="form-radio__icon"></span>
    Yes
  </label>

  <label class="form-radio" for="form-radio-4">
    <input class="form-radio__input" id="form-radio-4" type="radio" name="horizontal-radios">
    <span class="form-radio__icon"></span>
    No
  </label>
</div>

To generate this component, place the relevant information of your Radio inside of the prop options listed below.

Props

  • name: string (required)
  • id: string (required)
  • label: string (or renderable node) (required)
  • value: string (or renderable node) (required)
  • onChange: function (optional) (called with event)
  • checked: boolean (optional)
  • stylised: boolean (optional) (default false)

Code example

import FormElement from 'radius/dist/m2dm/react/forms/radio';

<Radio
  label="some label here"
  id="some-id-matcher"
  name="field-name-goes-here"
  value="some value"
/>

Default radios

Horizontal radios

<div>
  <label class="form-radio" for="form-radio-1">
    <input class="form-radio__input" id="form-radio-1" type="radio" checked name="default-radios">
    <span class="form-radio__icon"></span>
    Label is optional!
  </label>

  <label class="form-radio" for="form-radio-2">
    <input class="form-radio__input" id="form-radio-2" type="radio" name="default-radios">
    <span class="form-radio__icon"></span>
    Click me!
  </label>
</div>

<div class="u-horizontal-children">
  <label class="form-radio" for="form-radio-3">
    <input class="form-radio__input" id="form-radio-3" type="radio" name="horizontal-radios">
    <span class="form-radio__icon"></span>
    Yes
  </label>

  <label class="form-radio" for="form-radio-4">
    <input class="form-radio__input" id="form-radio-4" type="radio" name="horizontal-radios">
    <span class="form-radio__icon"></span>
    No
  </label>
</div>