Radio | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Radio
Radio is used when only one choice may be selected in a series of options.
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
value
The value to be used in the radio input. This is the value that will be returned on form submission
Type: string
colorScheme
The color of the radio. This should be one of the color keys in the theme (e.g."green", "red").
Type: string
Default: 'priamry'
isDisabled
If true, the radio will be disabled
Type: boolean
isInvalid
If true, the radio is marked as invalid. Changes style of unchecked state.
Type: boolean
size
The size (width and height) of the radio.
Type: "sm" | "md" | "lg"
icon
If given, will use this icon instead of the default.
Type: Element
wrapperRef
Ref to be passed to Icon's wrapper Box
Type: any
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: 'priamry'
size
The size (width and height) of the radio.
Type: "sm" | "md" | "lg"
onChange
The callback fired when any children radio is checked or unchecked.
Type: IRadioGroupOnChangeHandler
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. Check out the default theme of the radio.
Info: We can easily extend the radio component theme using extendTheme function as described in the documentation .
Nativebase logo
MadeWithNativeBase