Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

Radio

Radioは、ユーザーが複数の選択肢の中から1つを選択するための使用されるコンポーネントです。

ソース@yamada-ui/radio

インポート

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

使い方

編集可能な例

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

サイズを変更する

編集可能な例

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

カラースキームを変更する

編集可能な例

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

デフォルトで選択された状態にする

デフォルトで選択された状態にする場合は、defaultIsCheckedをtrueに設定します。

編集可能な例

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

無効化する

無効化する場合は、isDisabledをtrueに設定します。

編集可能な例

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

読み取り専用にする

読み取り専用にする場合は、isReadOnlyをtrueに設定します。

編集可能な例

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

無効な入力にする

無効な入力にする場合は、isInvalidをtrueに設定します。

編集可能な例

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

グループ化する

グループ化する場合は、RadioGroupを使用します。RadioGroupにitemsを設定することで、Checkboxを省略することができます。

編集可能な例

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!

制御する

編集可能な例

const [value, setValue] = useState<string>("孫悟空")

return (
  <RadioGroup value={value} onChange={(value) => setValue(value)}>
    <Radio value="孫悟空">孫悟空</Radio>
    <Radio value="ベジータ">ベジータ</Radio>
    <Radio value="フリーザ">フリーザ</Radio>
  </RadioGroup>
)
Copied!

カスタムフックを使用する

useRadioやuseRadioGroupなどのカスタムフックを使用して、カスタマイズしたチェックボックスを作成できます。

編集可能な例

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!

React Hook Formを使う

編集可能な例

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!

GitHubでこのページを編集する

前Textarea次RadioCard