Radio

Radio buttons give customers the ability to make a single selection from a group of two or more mutually exclusive options.

On this page

Import

Default Selected

Loading preview
Open in Storybook

Invalid

Loading preview
Open in Storybook

Legend Visually Hidden

Loading preview
Open in Storybook

Props

Radio Button Props

NameDescriptionDefault
disabled

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

boolean		-
aria-disabled

If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled".

Booleanish		-
label*

The label text describing the RadioButton.

string | ReactElement<any, string | JSXElementConstructor<any>>		-
checked

The checked state of the RadioButton (controlled component). This is automatically set when the RadioButton is used as the child of a RadioGroup.

boolean		-
value*

The value associated with the RadioButton. Used by the RadioGroup in onChange events.

string | number | readonly string[] | undefined		-
onChange

The event handler for change events on the radio input field.

ChangeEventHandler<HTMLInputElement>		-
defaultChecked

The default checked state of the RadioButton (uncontrolled component). This is automatically set when the RadioButton is used as the child of a RadioGroup.

boolean		-
id*

The ID that identifies and matches the label and the input elements.

string		-
children

Additional children, like hint text, to render.

ReactNode		-
isInvalid

Sets error styles.

boolean		-
reactlytics
ReactlyticsProp		-

Radio Group Props

NameDescriptionDefault
legend*

The text to set inside of the legend element.

string | ReactElement<any, string | JSXElementConstructor<any>>		-
children*

Children to render in the radio group - typically RadioButton and Legend.

NonNullable<ReactNode>		-
isLegendVisuallyHidden

If true, visually hides the legend element but it will still be available to screen readers

boolean		-
value

The value of the RadioGroup (controlled component).

string | number | readonly string[]		-
onChange

The event handler for change events on any of the RadioButtons (controlled component).

ChangeEventHandler<HTMLInputElement>		-
defaultValue

The default value of the RadioGroup (uncontrolled component).

string | number | readonly string[]		-
orientation

Controls the orientation that the RadioGroup's children are rendered in.

"horizontal" | "vertical"		vertical
aria-invalid

Sets aria-invalid to true and sets error styles.

Booleanish		-
disabled

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

boolean		-
aria-disabled

If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled".

Booleanish		-

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.