Radio

Design System - Radio component

The Radio component allows users to select a single option from a set of mutually exclusive choices. It promotes clarity, ease of decision-making, and accessibility through consistent styling and intuitive interaction patterns.

// Sample code

  <CheckBox
    label="Label"
    onChange={(e)=>{console.log(e.target.checked}}
  />

// Sample code

DigitAccordion(
              header: Text('Accordion'),
              content: Text('This is the content of Accordion'),
              initiallyExpanded: false,
              divider: true,
              showBorder: true,
            ),

Anatomy

Variants

Active

The active or "on" state of a radio button indicates that the option has been selected by the user. Unlike checkboxes, only one radio button within a group can be in the active state at any given time.

Inactive The inactive or "off" state of a radio button indicates that the option is available but not currently selected. This state is distinct from both the selected state and the disabled state. When a radio button is in the inactive state, it remains fully interactive. Users can click or tap on the radio button to select it, which will automatically deselect any previously selected option in the same group.

Properties

Filled State A radio button that shows it is selected by filling the inner circle. This state indicates the user’s current choice.

Default State The standard appearance of a radio button before any selection is made. It appears with an empty circle and is ready for interaction.

Disabled State A radio button that appears greyed out and cannot be selected. This state is used when an option is not available for user interaction.

Disabled Filled A selected radio button that is also disabled. It indicates a pre-selected option that users cannot change.

Read Only A radio button that is selected but not interactive. This state is used when users can view the selected option but are not allowed to modify it.

Property Configuration Table

Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.

Property

Value

Default

selectedOption

text

onSelect

text

options

yes/no

optionsKey

yes/no

innerStyles

number

style

yes/no

alignVertical

yes/no

additionalWrapperClass

yes/no

disabled

yes/no

name

number

inputRef

yes/no

inputStyle

text

isDependent

yes/no

labelKey

yes/no

value

yes/no

isLabelFirst

yes/no

inputStyle

yes/no

labelKey

yes/no

Interaction State

Hover State

When users hover over an inactive radio button, it transitions to display our Primary orange colour. This distinct colour change serves as a clear visual cue that differentiates the hover state from both the default inactive state and the non-interactive disabled state. The orange highlight indicates to users that the radio button is interactive and can be selected, encouraging engagement while reinforcing the component's actionable nature.

Mousedown State

When a user hovers over the button, a visual cue is added to emphasise interactivity. This is achieved by introducing a subtle outline around the button. The subtle halo outline complements the button's style, without overwhelming the design.

Behaviours

When the radio label exceeds the width of the parent container, the text wraps to the next line to maintain readability. Character count can be limited if required based on layout constraints.

Usage Guide

Single Selection Only

Use radio buttons when the user needs to select only one option from a list. They are not intended for multi-selection; use checkboxes if multiple selections are required.

Changelog

Date

Number

Notes

Dec 15, 2024

v-0.0.2

This component is added to the website. This component is now individually versioned.

Design Checklist

PreviousCheckbox NextStepper

Last updated 6 hours ago

Was this helpful?