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	ResponsiveValue<number | "px" | "container" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | ... 28 more ... | (string & {})>	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	ResponsiveValue<number | "px" | "container" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | ... 28 more ... | (string & {})>	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>

)

}

Read more about extending component theme here.