Radio Group (New)

Used to choose one option from a short list of mutually exclusive choices.

Radio Group New replaces existing Radio Button Group, which is now deprecated. While it remains available in the design system, please use Radio Group New instead.

New form components (Text field, Textarea, Radio Group, Checkbox, NumberField, TimePicker) can be used alongside the legacy form components (e.g. Radio Button (Deprecated), Checkbox (Deprecated), Text (Deprecated), Select, MultiSelect, Number) where appropriate. But check how they look together. Some pairings might not align correctly.

Stable

Show details

Radio Group lets users pick one option from a list of available options.

Anatomy

Anatomy summary lists and describes all the elements within a component (including nested components).

Element	Description	Optional?
1. Field label	Mandatory textual label used to describe the form field to guide users in filling it.	No
2. Required or optional marker	Textual label used to denote if a field is required or optional. Marker’s copy is not changeable.	Yes
3. Popover trigger	Used to display a Popover with more content explaining the context of a field. Used when Helper text is not sufficient.	Yes
4. Helper text	Additional description helping users provide the right input, if the field label is insufficient.	Yes
5. Default marker	Used to denote that an option is a default, recommended choice.	Yes
6. Helper text	Additional description for individual helping users provide the right input, if the field label is insufficient.	Yes
7. Field	Radio element that allows users to select one option out of several, mutually exclusive options.	No
8. Form validation	Icon and text used when validating user form input to provide advice on fixing input errors and confirmation when they are addressed.	Yes

Variants

Variants contain different versions of the component depending on specific properties, such as state, size, color, optional iconography, etc.

State, Helper Text, Popovers, and Markers

All new form components have been constructed using sub-components meant to be shared across forms. For that reason, Radio Group can have other variants are created by altering the properties of the sub-components. Check Component dependencies section for a detailed explanation.

Validation

Radio Group has two validation variants signifying whether there has been an error.

RadioGroup

validation neutral

Used to choose one option from a list of mutually exclusive choices.

RadioGroup

validation error

Used to choose one option from a list of mutually exclusive choices.

Component dependencies

This component is internally dependent on the following form sub-components:

Figma	Code
formElement.labelGroup	Legend
formElement.radioGroup.items	N/A
formElement.radio.field	N/A
formElement.radio	RadioButtonNew
formElement.validation	InputError
	FormDescription
	InputLabel

Code sub-components

Refer to the code documentation for further information.

Figma sub-components

formElement.labelGroup

isDisabled false

formElement.labelGroup

isDisabled true

formElement.labelGroup

Property	Values	Default
↳ ✏️ defaultText Text	string	(default)
hasDefaultMarker Boolean	true \| false	false
popover Boolean	true \| false	false
✏️ fieldLabel Text	string	Field label
hasRequiredMarker Boolean	true \| false	false
hasOptionalMarker Boolean	true \| false	true
↳ ✏️ helperText Text	string	Optional helper text
helperText Boolean	true \| false	false
↳ helperLink Boolean	true \| false	false
isDisabled Variant	false \| true	false