Version: 3.0.0-next.36

Radio

Radio is used when only one choice may be selected in a series of options.

Implements#

Examples#

Basic#

Disabled#

Invalid#

Size#

Custom Color#

Custom Icon#

Form Controlled#

Basic (With Ref)#

Accessibility#

Uses React Native ARIA @react-native-aria/radio which follows the Radio Group WAI-ARIA design pattern.

Keyboard Interactions#

KeyDescription
TabMoves focus to either the checked radio item or the first radio item in the group.
SpaceWhen focus is on an unchecked radio item, checks it.
ArrowDownMoves focus to the next radio item in the group.
ArrowRightMoves focus to the next radio item in the group.
ArrowUpMoves focus to the previous radio item in the group.
ArrowLeftMoves focus to the previous radio item in the group.

Props#

Radio#

NameTypeDescriptionDefault
namestringThe name of the input field in a radio (Useful for form submission).-
idstringThe id assigned to input field.
valuenumber, stringThe value to be used in the radio input. This is the value that will be returned on form submission-
colorSchemestringThe color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").default
defaultIsCheckedbooleanIf true, the radio will be initially checked.-
sizelg, md, smThe size (width and height) of the radio.md
isDisabledbooleanIf true, the radio will be disabled-
iconJSX.ElementIf given, will use this icon instead of the default.-
isInvalidbooleanIf true, the radio is marked as invalid. Changes style of unchecked state.-
onChangefunctionFunction called when the state of the radio changes.-
childrenJSX.ElementThe children of the radio.-
ariaLabelstringAn accessible label for the radio in event there's no visible label or children was passed-

Radio Group#

Radio.Group implements Box, so all the Box Props can be passed to it.

NameTypeDescriptionDefault
valueArrayThe value of the radio group.-
defaultValueArrayThe initial value of the radio group.-
onChangefunctionThe callback fired when any children radio is checked or unchecked.-

Shared Style Props#

The following props can be set on Radio.Group and they will be forwarded to all children Radio components.

NameTypeDescriptionDefault
colorSchemestringThe color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").default
sizelg, md, smThe size (width and height) of the radio.md
isDisabledbooleanIf true, the radio will be disabled-
isInvalidbooleanIf true, the radio is marked as invalid. Changes style of unchecked state.-