Radio | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
Data Display
Typography
Disclosure
Media and Icons
Others
Radio
Radio limits the selection from a series of option to only one.
Show Code
Playground
Examples
Controlled
Playground
Uncontrolled
Playground
Disabled
Playground
Invalid
Playground
Size
Playground
Custom Color
Playground
Custom Icon
Playground
Form Controlled
Playground
Basic (With Ref)
Playground
Props
Radio
Radio Group
value
The value of the radio group.
Type: string
name
The name of the input field in a radio (Useful for form submission).
Type: string
defaultValue
The initial value of the radio group.
Type: string
colorScheme
The color of the radios. This should be one of the color keys in the theme (e.g."green", "red").
Type: string
Default: 'primary'
size
The size (width and height) of the radio.
Type: ResponsiveValue<number | "full" | "sm" | "6" | "2xs" | "2" | "8" | "xs" | "3" | "12" | "md" | "4" | "16" | "xl" | "5" | "24" | "32" | "7" | "0.5" | "lg" | "1" | "2xl" | "2.5" | "1.5" | "10" | "20" | "64" | ... 27 more ... | (string & {})>
onChange
The callback fired when any children radio is checked or unchecked.
Type: IRadioGroupOnChangeHandler
_radio
Pass props will be passed to each radio.
Type: InterfaceRadioProps
Accessibility
Uses React Native ARIA which follows the .
Keyboard Interactions
Key
Description
Tab
Moves focus to either the checked radio item or the first radio item in the group.
Space
When focus is on an unchecked radio item, checks it.
ArrowDown
Moves focus to the next radio item in the group.
ArrowRight
Moves focus to the next radio item in the group.
ArrowUp
Moves focus to the previous radio item in the group.
ArrowLeft
Moves focus to the previous radio item in the group.
Styling
NativeBase ships with a default theme for each component. Checkout the default theme of radio.
Info: We can easily extend the radio component theme using extendTheme function as described in the documentation .
Nativebase logo
MadeWithNativeBase