Radio group Preview

Radio groups let people select a single item from a short list.

Use radio groups in layouts that offer enough space to list up to five options, or if it's important to view all options at once. If there isn't enough space, try a dropdown instead. If you need to let people select more than one option, try checkboxes. To let them immediately turn a setting on or off, try a switch.

Loading...
Open in CodeSandbox
Radio group storybook
React guidance
Radio group pattern
WAI guidance

Properties

as

“div”
Default:
none

disabled

Disable all Radio items in this group.

boolean
Default:
none

layout

How the radio items are laid out in the group.

“horizontal” “vertical” “horizontal-stacked”
Default:
“vertical”

name

The name of this radio group. This name is applied to all Radio items inside this group.

If no name is provided, one will be generated so that all of the Radio items have the same name.

string
Default:
none

onChange

Callback when the selected Radio item changes.

((ev: FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void)
Default:
none

required

Require a selection in this group. Adds the required prop to all child Radio items.

boolean
Default:
none

value

The selected Radio item in this group.

This should be the value prop of one of the Radio items inside this group.

string
Default:
none