Usage

Props

NameTypeRequiredDefaultDescription
checked
boolean
false

Selected state of the radio button

since

10.19.0

children
ReactNode
false
className
string
false

Additional classNames

disabled
boolean
false

Disabled state of the radio button

since

10.19.0

error
boolean
false

Error state of the radio button

since

10.19.0

style
CSSProperties
false

Additional CSS styles

disabled

error

selected

Tabbing

A radio group is defined by giving each of radio buttons in the group the same name. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.

Keyboard Interaction For Radio Groups Not Contained in a Toolbar: Tab and Shift + Tab: Move focus into and out of the radio group. Right Arrow and Down Arrow: move focus to the next radio button in the group, uncheck the previously focused button, and check the newly focused button. Left Arrow and Up Arrow: move focus to the previous radio button in the group, uncheck the previously focused button, and check the newly focused button. Space: checks the focused radio button if it is not already checked.