Radio | NativeBase | Universal Components for React and React Native

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
size
The size (width and height) of the radio.
Type: ThemeComponentSizeType<"Radio">
colorScheme
The color of the radio. This should be one of the color keys in the theme (e.g."green", "red").
Type: ColorSchemeType & ResponsiveValue<"default">
Default: 'primary'
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
isHovered
If true, the radio will be hovered
Type: boolean
isPressed
If true, the radio will be pressed
Type: boolean
isFocused
If true, the radio will be focused
Type: boolean
value
The value to be used in the radio input. This is the value that will be returned on form submission
Type: string
isDisabled
If true, the radio will be disabled
Type: boolean
isFocusVisible
If true, the radio focus ring will be visible
Type: boolean
isInvalid
If true, the radio is marked as invalid. Changes style of unchecked state.
Type: boolean
_stack
Props to be passed to the Stack used inside.
Type: Partial<IStackProps>
_disabled
Passed props wilICheckboxGroupPropsl be applied on disabled state.
Type: Omit<Partial<IRadioProps>, "_disabled">
_checked
Passed props will be applied on checked state.
Type: Omit<Partial<IRadioProps>, "_checked">
_unchecked
Passed props will be applied on unchecked state.
Type: Omit<Partial<IRadioProps>, "_unchecked">
_focus
Passed props will be applied on focus state.
Type: Omit<Partial<IRadioProps>, "_focus">
_hover
Passed props will be applied on hover state.
Type: Omit<Partial<IRadioProps>, "_hover">
_invalid
Passed props will be applied on invalid state.
Type: Omit<Partial<IRadioProps>, "_invalid">
_pressed
Passed props will be applied on pressed state on native.
Type: Omit<Partial<IRadioProps>, "_pressed">
_icon
Icon related props can be passed in _icon.
Type: Partial<IIconProps>
_readOnly
Passed props will be applied on readonly state.
Type: Omit<Partial<IRadioProps>, "_readOnly">
_interactionBox
You can style interaction box around the checkbox using this.
Type: Omit<Partial<IRadioProps>, "_interactionBox">
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: ColorSchemeType
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" | "2.5" | "lg" | "1" | "2xl" | "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: Partial<IRadioProps>
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