Radio
Radios are used when only one choice may be selected in a series of options.
Import
import { Radio, RadioGroup } from '@chakra-ui/react';
Usage
Radio with custom color
You can override the colorScheme
of the Radio to any color key specified in
theme.colors
.
Radio sizes
The checkbox comes with 3 sizes.
Disabled radios
Horizontal alignment
Invalid Radio
Custom Radio Buttons
In some cases, you might need to create components that work like radios but
don't look like radios. Chakra exports useRadio
, and useRadioGroup
hooks to
help with this scenario. Here's what you need to do:
- Create a component that consumes the
useRadio
hook. - Use the
useRadioGroup
hook to control a group of custom radios.
You can head on over to the pages for the useRadio and useRadioGroup hooks to see more detail about their uses.
Please be aware that the example below should only be used if you really need a radio button for data collection purposes. If you want to toggle between different content on activation of a button use the
Tabs
component.
// 1. Create a component that consumes the `useRadio` hook
function RadioCard(props) {
const { getInputProps, getCheckboxProps } = useRadio(props);
const input = getInputProps();
const checkbox = getCheckboxProps();
return (
<Box as='label'>
<input {...input} />
<Box
{...checkbox}
cursor='pointer'
borderWidth='1px'
borderRadius='md'
boxShadow='md'
_checked={{
bg: 'teal.600',
color: 'white',
borderColor: 'teal.600',
}}
_focus={{
boxShadow: 'outline',
}}
px={5}
py={3}
>
{props.children}
</Box>
</Box>
);
}
// Step 2: Use the `useRadioGroup` hook to control a group of custom radios.
function Example() {
const options = ['react', 'vue', 'svelte'];
const { getRootProps, getRadioProps } = useRadioGroup({
name: 'framework',
defaultValue: 'react',
onChange: console.log,
});
const group = getRootProps();
return (
<HStack {...group}>
{options.map((value) => {
const radio = getRadioProps({ value });
return (
<RadioCard key={value} {...radio}>
{value}
</RadioCard>
);
})}
</HStack>
);
}
render(<Example />);
Note about name
prop
We recommend passing the name
prop to the RadioGroup
component, instead of
passing it to each Radio
component. By default, the name
prop of the
RadioGroup takes precedence.
// Do this ✅
<RadioGroup name="form-name">
<Radio>Radio 1</Radio>
<Radio>Radio 2</Radio>
</RadioGroup>
// Don't do this ❌
<RadioGroup >
<Radio name="form-name">Radio 1</Radio>
<Radio name="form-name">Radio 2</Radio>
</RadioGroup>
Props
aria-describedby
aria-describedby
Refers to the id
of the element that labels the radio element.
string
colorScheme
colorScheme
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
"blue"
data-radiogroup
data-radiogroup
@internal
any
defaultChecked
defaultChecked
If true
, the radio will be initially checked.
boolean
id
id
id assigned to input
string
inputProps
inputProps
Additional props to be forwarded to the input
element
InputHTMLAttributes<HTMLInputElement>
isChecked
isChecked
If true
, the radio will be checked.
You'll need to pass onChange
to update its value (since it is now controlled)
boolean
isDisabled
isDisabled
If true
, the radio will be disabled
boolean
isFocusable
isFocusable
If true
and isDisabled
is true, the radio will remain
focusable but not interactive.
boolean
isInvalid
isInvalid
If true
, the radio button will be invalid. This also sets `aria-invalid` to true
.
boolean
isReadOnly
isReadOnly
If true
, the radio will be read-only
boolean
isRequired
isRequired
If true
, the radio button will be required. This also sets `aria-required` to true
.
boolean
name
name
The name of the input field in a radio (Useful for form submission).
string
onChange
onChange
Function called when checked state of the input
changes
((event: ChangeEvent<HTMLInputElement>) => void)
size
size
"md" | "lg" | "sm"
"md"
spacing
spacing
The spacing between the checkbox and its label text
SystemProps["marginLeft"]
0.5rem
value
value
The value to be used in the radio button. This is the value that will be returned on form submission.
string | number
variant
variant
Variants for Radio
are not implemented in the default theme. You can extend the theme to implement them.
string