Skip to content

Radio

Radios are used to choose between multiple options.

Overview

Use these when there are multiple options, but only one of them can be selected. Consider using a radio instead of a dropdown menu when there are only a few options available.

Usage

Choose a climate action?

Note that RadioField expects Radio elements as its direct children in order to set the correct name, value, and error properties.

Content

Copy for individual inputs in radios and checkbox groups are in semibold for consistency, because they sit in a hierarchy below the group labels.

Only ask for information that definitely needed, don’t mark fields as ‘required’, instead use ‘optional’.

Hint Text

Radios have two options to add hint text. Hint text that appears below the group label should be relevant to the entire group, whereas text below the select item should be relevant to that item only.

Choose a climate action?choose an action where you can make the most difference

Accessibility

Labels

Radio groups need a group label, which should always sit aligned above it. This label allows users to understand what to enter as well as auto focussing the input which creates a larger touch target.

Validation

  • Avoid default HTML form validation

  • Avoid validation while typing

  • Always validate and show error messages once the form has been submitted

    Error messages should appear above the input, and below the label and help text. These should be written in a concise, specific, way using plain language and without pleasantries.

Choose a climate action?choose an action where you can make the most differenceSelect one

Properties

RadioField

NameValuesDefault

name (required)Radios are treated as a single field

String

label (required)

ReactNode

optional

Boolean

false

hint

ReactNode

error

ReactNode

valueRequired for React Native

String

onValueChange(newValue) => null

Function

defaultValueThe default selected radio. React only

String

...

JSX.IntrinsicElements["fieldset"]

Radio

NameValuesDefault

id (required)

String

label (required)

ReactNode

valueRequired for React Native

String

hint

ReactNode

...

JSX.IntrinsicElements["input"]

Tokens