Radio
Radio
is a component used for allowing users to select one option from multiple choices.
Import
import { Radio, RadioGroup } from "@yamada-ui/react"
Usage
Editable example
<Radio>孫悟空</Radio>
Change Size
Editable example
<Wrap gap="md"> <Radio size="sm">孫悟空</Radio> <Radio size="md">ベジータ</Radio> <Radio size="lg">フリーザ</Radio> </Wrap>
Change Color Scheme
Editable example
<Wrap gap="md"> <Radio colorScheme="secondary" defaultIsChecked> Secondary </Radio> <Radio colorScheme="green" defaultIsChecked> Green </Radio> </Wrap>
Set as Default Checked
To set the radio button as default checked, set defaultIsChecked
to true
.
Editable example
<Radio defaultIsChecked>孫悟空</Radio>
Disable
To disable the radio button, set isDisabled
to true
.
Editable example
<VStack> <Radio isDisabled>All Notifications</Radio> <Radio isDisabled defaultIsChecked> All Notifications </Radio> <RadioGroup defaultValue="all"> <Radio value="all">All Notifications</Radio> <Radio value="important" isDisabled> Important Notifications </Radio> <Radio value="service">Service Notifications</Radio> </RadioGroup> <FormControl isDisabled label="Which notifications would you like to receive?" > <Radio defaultIsChecked>All Notifications</Radio> </FormControl> <FormControl isDisabled label="Which notifications would you like to receive?" > <RadioGroup defaultValue="all"> <Radio value="all">All Notifications</Radio> <Radio value="important">Important Notifications</Radio> <Radio value="service">Service Notifications</Radio> </RadioGroup> </FormControl> </VStack>
Set as Read-Only
To make the radio button read-only, set isReadOnly
to true
.
Editable example
<VStack> <Radio isReadOnly>All Notifications</Radio> <Radio isReadOnly defaultIsChecked> All Notifications </Radio> <RadioGroup defaultValue="all"> <Radio value="all">All Notifications</Radio> <Radio value="important" isReadOnly> Important Notifications </Radio> <Radio value="service">Service Notifications</Radio> </RadioGroup> <FormControl isReadOnly label="Which notifications would you like to receive?" > <Radio defaultIsChecked>All Notifications</Radio> </FormControl> <FormControl isReadOnly label="Which notifications would you like to receive?" > <RadioGroup defaultValue="all"> <Radio value="all">All Notifications</Radio> <Radio value="important">Important Notifications</Radio> <Radio value="service">Service Notifications</Radio> </RadioGroup> </FormControl> </VStack>
Set as Invalid Input
To set the radio button as an invalid input, set isInvalid
to true
.
Editable example
<VStack> <Radio isInvalid>All Notifications</Radio> <Radio isInvalid defaultIsChecked> All Notifications </Radio> <RadioGroup defaultValue="all"> <Radio value="all">All Notifications</Radio> <Radio value="important" isInvalid> Important Notifications </Radio> <Radio value="service">Service Notifications</Radio> </RadioGroup> <FormControl isInvalid label="Which notifications would you like to receive?" errorMessage="This is required." > <Radio>All Notifications</Radio> </FormControl> <FormControl isInvalid label="Which notifications would you like to receive?" errorMessage="This is required." > <RadioGroup defaultValue="all"> <Radio value="all">All Notifications</Radio> <Radio value="important">Important Notifications</Radio> <Radio value="service">Service Notifications</Radio> </RadioGroup> </FormControl> </VStack>
Grouping
To group radio buttons, use RadioGroup
. By setting items
in RadioGroup
, you can omit specifying each Checkbox
.
Editable example
const items: RadioItem[] = [ { label: "孫悟空", value: "孫悟空" }, { label: "ベジータ", value: "ベジータ" }, { label: "フリーザ", value: "フリーザ" }, ] return ( <VStack> <RadioGroup defaultValue="孫悟空"> <Radio value="孫悟空">孫悟空</Radio> <Radio value="ベジータ">ベジータ</Radio> <Radio value="フリーザ">フリーザ</Radio> </RadioGroup> <RadioGroup direction="row" defaultValue="孫悟空"> <Radio value="孫悟空">孫悟空</Radio> <Radio value="ベジータ">ベジータ</Radio> <Radio value="フリーザ">フリーザ</Radio> </RadioGroup> <RadioGroup defaultValue="孫悟空" items={items} /> </VStack> )
Control
Editable example
const [value, setValue] = useState<string>("孫悟空") return ( <RadioGroup value={value} onChange={(value) => setValue(value)}> <Radio value="孫悟空">孫悟空</Radio> <Radio value="ベジータ">ベジータ</Radio> <Radio value="フリーザ">フリーザ</Radio> </RadioGroup> )
Use Custom Hooks
You can create customized radio buttons using custom hooks like useRadio
or useRadioGroup
.
Editable example
const CustomRadio: FC<ReturnType<UseRadioGroupReturn["getRadioProps"]>> = ( props, ) => { const { getInputProps, getIconProps } = useRadio(props) return ( <Box as="label"> <ui.input {...getInputProps()} /> <Box {...getIconProps()} cursor="pointer" borderWidth="1px" py="xs" px="sm" rounded="md" _checked={{ bg: "blue.500", color: "white", borderColor: "blue.500", }} > {props.value} </Box> </Box> ) } const { getContainerProps, getRadioProps } = useRadioGroup<string>({ defaultValue: "孫悟空", }) return ( <HStack gap="sm" {...getContainerProps()}> <CustomRadio {...getRadioProps({ value: "孫悟空" })} /> <CustomRadio {...getRadioProps({ value: "ベジータ" })} /> <CustomRadio {...getRadioProps({ value: "フリーザ" })} /> </HStack> )
Use React Hook Form
Editable example
type Data = { radio: string } const { control, handleSubmit, watch, formState: { errors }, } = useForm<Data>() const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data) console.log("watch:", watch()) return ( <VStack as="form" onSubmit={handleSubmit(onSubmit)}> <FormControl isInvalid={!!errors.radio} label="Who is your favorite character?" errorMessage={errors.radio ? errors.radio.message : undefined} > <Controller name="radio" control={control} rules={{ required: { value: true, message: "This is required." } }} render={({ field }) => ( <RadioGroup {...field}> <Radio value="孫悟空">孫悟空</Radio> <Radio value="ベジータ">ベジータ</Radio> <Radio value="フリーザ">フリーザ</Radio> </RadioGroup> )} /> </FormControl> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
Edit this page on GitHub