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.

Component React

// Sample code

        <RadioButtons
          onSelect={(selected) => {
            setSelectedOption(selected.code);
          }}
          disabled = {true}
          options={options}
          optionsKey="name"
          selectedOption={options.find((opt) => opt.code === selectedOption)}
          value={selectedOption}
        />

Component Flutter

Component Design

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.

React

Property	Value	Default
selectedOption	text	-
onSelect	text	no
options	yes/no	no
optionsKey	yes/no	-
innerStyles	number	-
style	yes/no	-
alignVertical	yes/no	no
additionalWrapperClass	yes/no	no
disabled	yes/no	no
name	number	no
inputRef	yes/no	no
inputStyle	text	no
isDependent	yes/no	no
labelKey	yes/no	-
value	yes/no	-
isLabelFirst	yes/no	-
inputStyle	yes/no	-
labelKey	yes/no	-

Flutter

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

---

	All interactive states - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Accessible use of colours - Colour is not used as the only visual means of conveying information (WCAG 2.1 1.4.1)
	Accessible contrast for text - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
	Accessible contrast for UI components - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
	Keyboard interactions - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Screen reader accessible - All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.
	Responsive for all breakpoints - Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop
	Usage guidelines - Includes a list of dos and don'ts that highlight best practices and common mistakes.
	Content guidelines - Content standards and usage guidelines for writing and formatting in-product content for the component.
	Defined variants and properties - Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states, etc.)
	Defined behaviours - Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.
	Design Kit - Access to the design file for the component in Figma, multiple options, states, colour themes, and platform scales.