[component]

Dev Mode
Radio field
Description
Radio fields are used for selecting only 1 item from a list of 2 or more items. If you have a binary choice, consider using checkboxes or toggles instead.
Some Text
Option 1
Option 2
Option 3
Title
Variant
Usage Guidelines
Do
Use radio buttons when only one option can be selected from a list.
Don't
Do not use radio buttons when there’s only one option to be selected. Use a checkbox or switch instead.
Accessibility
Labels should be readable by screen readers.
Labels should be able to be clicked or tapped to select a radio field.
Keyboards should be able to tab back and forth between the radio buttons.
The radio buttons should have a focus state.
Props
Name
Type
Required
Description
onChange
Required
options
Required
title
string
Required
value
string
Required
variant
Status
Documentation:
Figma:
Web:
iOS:
Android:
Related
Radio, Checkbox
Examples
Left Text
Sample Radio Fields - Left
Option 1
Option 2
Option 3
Right Text
Sample Radio Fields - Right
Option 1
Option 2
Option 3