BRAID
Braid Logo
 

RadioGroup

Label
Open in Playroom
The RadioGroup provides an accessible way to group and control a set of RadioItem components. The RadioGroup is responsible for handling the value, tone, message, and disabled state—determining the presentation and selection of the items in the list.

Alternatives

Accessibility

Follows the WAI-ARIA Radio Group Pattern for radio groups not contained in a toolbar.

Message and tone

A message is typically used to communicate the status of a field, such as an error message. This will be announced on focus of the field and can be combined with a tone to illustrate its purpose.
The supported tones are: "critical", "positive", and "neutral".
Label
Critical message
Label
Positive message
Open in Playroom

Field description

Additional context can be provided with a description. This will display below the field label and also be announced by a screen reader when the field is focused.
Label
Extra information about the field
Open in Playroom

Sizes

You can customise the size of the radio items via the size prop, which accepts either standard or small.
Standard
Small
Open in Playroom

Disabled field

Mark the entire RadioGroup as disabled by passing true to the disabled prop.
Label
Open in Playroom

Disabling at item-level

Mark an individual RadioItem as disabled by passing true to its disabled prop.
Label
Open in Playroom

Item-level descriptions

Additional context can also be provided at an item level with a description. This will display below the RadioItem label and also be announced by a screen reader when the item is focused.
Label
Description for item 1
Description for item 2
Description for item 3
Open in Playroom

Badge support

Add a Badge alongside the RadioItem label using the badge prop.
Label
Positive
Open in Playroom

Toggling nested content

Nesting content inside of a RadioItem will both align the content with the item label, and toggle it’s visibility based on the value state.
Label
Nested content
Open in Playroom

Indirect or hidden field labels

In some cases it may be necessary for a field to be labelled by another element or even not to have a visual label. Instead of providing a label either aria-label or aria-labelledby can be provided.

Custom field label

The label for this fieldset is the Heading element before it.
Open in Playroom