Version: 3.0.7

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#

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

We can easily extend the radio component theme using extendTheme function as shown below.

import { extendTheme, NativeBaseProvider } from "native-base";

const theme = extendTheme({
 components: {
 Radio: {
 baseStyle: {},
 defaultProps: {},
 variants: {},
 sizes: {},
 }
 } 
});

function MyApp() {
 return (
 <NativeBaseProvider theme={theme}>
 {/* Rest of the app goes here */}
 </NativeBaseProvider>
 )
}