Version: 3.0.0-next.40

Radio

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

Examples#

Controlled#

Uncontrolled#

Disabled#

Invalid#

Size#

Custom Color#

Custom Icon#

Form Controlled#

Basic (With Ref)#

Props#

Radio#

Name Type Description Default
value string The value to be used in the radio input. This is the value that will be returned on form submission -
colorScheme string The color of the radio. This should be one of the color keys in the theme (e.g."green", "red"). 'priamry'
isDisabled boolean If true, the radio will be disabled -
isInvalid boolean If true, the radio is marked as invalid. Changes style of unchecked state. -
size "sm" | "md" | "lg" The size (width and height) of the radio. -
icon Element If given, will use this icon instead of the default. -
wrapperRef any Ref to be passed to Icon's wrapper Box -

Radio implements Box

Radio Group#

Name Type Description Default
value string The value of the radio group. -
name string The name of the input field in a radio (Useful for form submission). -
defaultValue string The initial value of the radio group. -
colorScheme string The color of the radios. This should be one of the color keys in the theme (e.g."green", "red"). 'priamry'
size "sm" | "md" | "lg" The size (width and height) of the radio. -
onChange IRadioGroupOnChangeHandler The callback fired when any children radio is checked or unchecked. -

RadioGroup implements Box

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.