Radio limits the selection from a series of option to only one.
const Example = () => {
const [value, setValue] = React.useState("one");
return <Radio.Group name="myRadioGroup" accessibilityLabel="favorite number" value={value} onChange={nextValue => {
setValue(nextValue);
}}>
<Radio shadow={2} value="one" my="2">
One
</Radio>
<Radio shadow={2} value="two" my="2">
Two
</Radio>
</Radio.Group>;
};
const Example = () => {
const [value, setValue] = React.useState("one");
return <Radio.Group name="myRadioGroup" accessibilityLabel="favorite number" value={value} onChange={nextValue => {
setValue(nextValue);
}}>
<Radio value="one" my={1}>
One
</Radio>
<Radio value="two" my={1}>
Two
</Radio>
</Radio.Group>;
};
const Example = () => {
return <Radio.Group defaultValue="1" name="myRadioGroup" accessibilityLabel="Pick your favorite number">
<Radio value="1" my={1}>
First
</Radio>
<Radio value="2" my={1}>
Second
</Radio>
<Radio value="3" my={1}>
Third
</Radio>
</Radio.Group>;
};
const Example = () => {
return <Radio.Group defaultValue="2" name="exampleGroup" accessibilityLabel="select prize">
<Radio value="1" my={1} isDisabled>
First
</Radio>
<Radio value="2" my={1}>
Second
</Radio>
<Radio value="3" my={1}>
Third
</Radio>
</Radio.Group>;
};
const Example = () => {
return <Radio.Group name="exampleGroup" accessibilityLabel="select an option">
<Radio value="test" isInvalid>
Others
</Radio>
</Radio.Group>;
};
const Example = () => {
return <Radio.Group name="exampleGroup" defaultValue="1" accessibilityLabel="pick a size">
<Stack direction={{
base: "column",
md: "row"
}} alignItems={{
base: "flex-start",
md: "center"
}} space={4} w="75%" maxW="300px">
<Radio value="1" colorScheme="red" size="sm" my={1}>
Small
</Radio>
<Radio value="2" colorScheme="green" size="md" my={1}>
Medium
</Radio>
<Radio value="3" colorScheme="yellow" size="lg" my={1}>
Large
</Radio>
</Stack>
</Radio.Group>;
};
const Example = () => {
return <Radio.Group defaultValue="1" name="exampleGroup" accessibilityLabel="favorite colorscheme">
<Radio colorScheme="emerald" value="1" my={1}>
emerald
</Radio>
<Radio colorScheme="secondary" value="2" my={1}>
secondary
</Radio>
<Radio colorScheme="warning" value="3" my={1}>
warning
</Radio>
</Radio.Group>;
};
const Example = () => {
return <Radio.Group defaultValue="1" size="lg" name="exampleGroup" accessibilityLabel="pick a choice">
<Radio _text={{
mx: 2
}} colorScheme="green" value="1" icon={<Icon as={<MaterialCommunityIcons name="alien" />} />} my={1}>
Alien
</Radio>
<Radio _text={{
mx: 2
}} colorScheme="red" value="2" icon={<Icon as={<MaterialCommunityIcons name="fire" />} />} my={1}>
Fire
</Radio>
<Radio colorScheme="warning" _text={{
mx: 2
}} value="3" icon={<Icon as={<MaterialCommunityIcons name="exclamation" />} />} my={1}>
Warning
</Radio>
</Radio.Group>;
};
const Example = () => {
const [groupValue, setGroupValue] = React.useState("1");
return <Container>
<FormControl isInvalid>
<FormControl.Label _text={{
fontSize: "lg",
bold: true
}}>
Select Prize
</FormControl.Label>
<Radio.Group name="exampleGroup" accessibilityLabel="select prize" defaultValue={groupValue} onChange={value => {
setGroupValue(value || "");
}}>
<Radio value="1" my="1">
First
</Radio>
<Radio value="2" my="1">
Second
</Radio>
<Radio value="3" my="1">
Third
</Radio>
</Radio.Group>
<FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
You must select a Prize.
</FormControl.ErrorMessage>
</FormControl>
</Container>;
};
const Example = () => {
const myRef = React.useRef({});
return <Radio.Group name="exampleGroup" colorScheme="success" accessibilityLabel="pick an option" onChange={value => {
if (value === "2") {
if (Platform.OS !== "web") myRef.current.setNativeProps({
backgroundColor: "#00de0050"
});
} else {
if (Platform.OS !== "web") myRef.current.setNativeProps({
backgroundColor: "#fa000050"
});
}
}}>
<Radio colorScheme="success" value="1" my={1}>
Wrong
</Radio>
<Radio colorScheme="success" ref={myRef} value="2" my={1}>
Right
</Radio>
</Radio.Group>;
};
Radio implements
,
,
,
,
,
,
,
,
,
RadioGroup implements
,
,
,
,
,
,
,
,
,
The value of the radio group.
The name of the input field in a radio (Useful for form submission).
The initial value of the radio group.
The color of the radios. This should be one of the color keys in the theme (e.g."green", "red").
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 & {})>
The callback fired when any children radio is checked or unchecked.
Type: IRadioGroupOnChangeHandler
Pass props will be passed to each radio.
Type: InterfaceRadioProps
Uses React Native ARIA
which follows the
.
Moves focus to either the checked radio item or the first radio item in the group.
When focus is on an unchecked radio item, checks it.
Moves focus to the next radio item in the group.
Moves focus to the next radio item in the group.
Moves focus to the previous radio item in the group.
Moves focus to the previous radio item in the group.
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 .
