Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

Radio

Radio is a component used for allowing users to select one option from multiple choices.

Source@yamada-ui/radio

Import

import { Radio, RadioGroup } from "@yamada-ui/react"
Copied!

Usage

Editable example

<Radio>孫悟空</Radio>
Copied!

Change Size

Editable example

<Wrap gap="md">
  <Radio size="sm">孫悟空</Radio>
  <Radio size="md">ベジータ</Radio>
  <Radio size="lg">フリーザ</Radio>
</Wrap>
Copied!

Change Color Scheme

Editable example

<Wrap gap="md">
  <Radio colorScheme="secondary" defaultIsChecked>
    Secondary
  </Radio>
  <Radio colorScheme="green" defaultIsChecked>
    Green
  </Radio>
</Wrap>
Copied!

Set as Default Checked

To set the radio button as default checked, set defaultIsChecked to true.

Editable example

<Radio defaultIsChecked>孫悟空</Radio>
Copied!

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>

  <Fieldset isDisabled legend="Which notifications would you like to receive?">
    <Radio defaultIsChecked>All Notifications</Radio>
  </Fieldset>

  <Fieldset isDisabled legend="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>
  </Fieldset>
</VStack>
Copied!

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>

  <Fieldset isReadOnly legend="Which notifications would you like to receive?">
    <Radio defaultIsChecked>All Notifications</Radio>
  </Fieldset>

  <Fieldset isReadOnly legend="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>
  </Fieldset>
</VStack>
Copied!

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>

  <Fieldset
    isInvalid
    legend="Which notifications would you like to receive?"
    errorMessage="This is required."
  >
    <Radio>All Notifications</Radio>
  </Fieldset>

  <Fieldset
    isInvalid
    legend="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>
  </Fieldset>
</VStack>
Copied!

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>
)
Copied!

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>
)
Copied!

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>
)
Copied!

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)}>
    <Fieldset
      isInvalid={!!errors.radio}
      legend="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>
        )}
      />
    </Fieldset>

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)
Copied!

Edit this page on GitHub

PreviousTextareaNextRadioCard