Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

RadioCard

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

ソース@yamada-ui/radio

インポート

import {
  RadioCard,
  RadioCardAddon,
  RadioCardDescription,
  RadioCardGroup,
  RadioCardLabel,
} from "@yamada-ui/react"
Copied!

使い方

編集可能な例

<RadioCardGroup>
  <RadioCard
    description="パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。"
    label="ビアンカ"
    value="ビアンカ"
  />
  <RadioCard
    description="大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。"
    label="フローラ"
    value="フローラ"
  />
  <RadioCard
    description="なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。"
    label="ルドマン"
    value="ルドマン"
  />
</RadioCardGroup>
Copied!

または、itemsを設定することでRadioCardを省略することができます。

編集可能な例

const items = useMemo<RadioCardItem[]>(
  () => [
    {
      description:
        "パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
      label: "ビアンカ",
      value: "ビアンカ",
    },
    {
      description:
        "大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
      label: "フローラ",
      value: "フローラ",
    },
    {
      description:
        "なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
      label: "ルドマン",
      value: "ルドマン",
    },
  ],
  [],
)

return <RadioCardGroup items={items} />
Copied!

バリアントを変更する

編集可能な例

const items = useMemo<RadioCardItem[]>(
  () => [
    {
      description:
        "パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
      label: "ビアンカ",
      value: "ビアンカ",
    },
    {
      description:
        "大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
      label: "フローラ",
      value: "フローラ",
    },
    {
      description:
        "なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
      label: "ルドマン",
      value: "ルドマン",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["outline", "subtle", "surface"]}>
      {(variant) => (
        <RadioCardGroup
          key={variant}
          variant={variant}
          defaultValue="フローラ"
          items={items}
        />
      )}
    </For>
  </VStack>
)
Copied!

サイズを変更する

編集可能な例

const items = useMemo<RadioCardItem[]>(
  () => [
    {
      description:
        "パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
      label: "ビアンカ",
      value: "ビアンカ",
    },
    {
      description:
        "大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
      label: "フローラ",
      value: "フローラ",
    },
    {
      description:
        "なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
      label: "ルドマン",
      value: "ルドマン",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["sm", "md", "lg"]}>
      {(size) => (
        <RadioCardGroup
          key={size}
          size={size}
          defaultValue="フローラ"
          items={items}
        />
      )}
    </For>
  </VStack>
)
Copied!

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

編集可能な例

const items = useMemo<RadioCardItem[]>(
  () => [
    { label: "ビアンカ", value: "ビアンカ" },
    { label: "フローラ", value: "フローラ" },
    { label: "ルドマン", value: "ルドマン" },
  ],
  [],
)

return (
  <VStack>
    <For each={["outline", "subtle", "surface"]}>
      {(variant) => (
        <For key={variant} each={["secondary", "green"]}>
          {(colorScheme) => (
            <RadioCardGroup
              key={colorScheme}
              colorScheme={colorScheme}
              variant={variant}
              defaultValue="フローラ"
              items={items}
            />
          )}
        </For>
      )}
    </For>
  </VStack>
)
Copied!

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

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

編集可能な例

const items = useMemo<RadioCardItem[]>(
  () => [
    { label: "ビアンカ", value: "ビアンカ" },
    { label: "フローラ", value: "フローラ" },
    { label: "ルドマン", value: "ルドマン" },
  ],
  [],
)

return <RadioCardGroup defaultValue="フローラ" items={items} />
Copied!

アドオンを追加する

アドオンを追加する場合は、addonにReactNodeを設定するか、RadioCardAddonコンポーネントを使用します。

編集可能な例

const items = useMemo<RadioCardItem[]>(
  () => [
    {
      addon: "ドラゴンクエストV 天空の花嫁（DQ5）",
      description:
        "パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
      label: "ビアンカ",
      value: "ビアンカ",
    },
    {
      addon: "ドラゴンクエストV 天空の花嫁（DQ5）",
      description:
        "大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
      label: "フローラ",
      value: "フローラ",
    },
    {
      addon: "ドラゴンクエストV 天空の花嫁（DQ5）",
      description:
        "なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
      label: "ルドマン",
      value: "ルドマン",
    },
  ],
  [],
)

return <RadioCardGroup items={items} />
Copied!

編集可能な例

<RadioCardGroup>
  <RadioCard
    addon="ドラゴンクエストV 天空の花嫁（DQ5）"
    description="パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。"
    label="ビアンカ"
    value="ビアンカ"
  />
  <RadioCard
    addon="ドラゴンクエストV 天空の花嫁（DQ5）"
    description="大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。"
    label="フローラ"
    value="フローラ"
  />
  <RadioCard
    addon="ドラゴンクエストV 天空の花嫁（DQ5）"
    description="なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。"
    label="ルドマン"
    value="ルドマン"
  />
</RadioCardGroup>
Copied!

編集可能な例

<RadioCardGroup>
  <RadioCard value="ビアンカ">
    <RadioCardLabel>ビアンカ</RadioCardLabel>
    <RadioCardDescription>
      パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。
    </RadioCardDescription>
    <RadioCardAddon>ドラゴンクエストV 天空の花嫁（DQ5）</RadioCardAddon>
  </RadioCard>

  <RadioCard value="フローラ">
    <RadioCardLabel>フローラ</RadioCardLabel>
    <RadioCardDescription>
      大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。
    </RadioCardDescription>
    <RadioCardAddon>ドラゴンクエストV 天空の花嫁（DQ5）</RadioCardAddon>
  </RadioCard>

  <RadioCard value="ルドマン">
    <RadioCardLabel>ルドマン</RadioCardLabel>
    <RadioCardDescription>
      なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。
    </RadioCardDescription>
    <RadioCardAddon>ドラゴンクエストV 天空の花嫁（DQ5）</RadioCardAddon>
  </RadioCard>
</RadioCardGroup>
Copied!

アイコンを非表示にする

アイコンを非表示にする場合は、RadioCardGroupまたはRadioCardのwithIconをfalseに設定します。デフォルトは、trueです。

編集可能な例

const items = useMemo<RadioCardItem[]>(
  () => [
    {
      label: "ビアンカ",
      value: "ビアンカ",
      withIcon: false,
    },
    {
      label: "フローラ",
      value: "フローラ",
    },
    {
      label: "ルドマン",
      value: "ルドマン",
    },
  ],
  [],
)

return <RadioCardGroup items={items} />
Copied!

編集可能な例

<RadioCardGroup withIcon={false}>
  <RadioCard label="ビアンカ" value="ビアンカ" />
  <RadioCard label="フローラ" value="フローラ" />
  <RadioCard label="ルドマン" value="ルドマン" />
</RadioCardGroup>
Copied!

無効化する

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

編集可能な例

const items = useMemo<RadioCardItem[]>(
  () => [
    { label: "ビアンカ", value: "ビアンカ" },
    { label: "フローラ", value: "フローラ" },
    { label: "ルドマン", value: "ルドマン" },
  ],
  [],
)

return (
  <VStack>
    <RadioCardGroup defaultValue="ビアンカ">
      <RadioCard isDisabled value="ビアンカ">
        <RadioCardLabel>ビアンカ</RadioCardLabel>
        <RadioCardDescription>
          パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。
        </RadioCardDescription>
      </RadioCard>

      <RadioCard value="フローラ">
        <RadioCardLabel>フローラ</RadioCardLabel>
        <RadioCardDescription>
          大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。
        </RadioCardDescription>
      </RadioCard>

      <RadioCard value="ルドマン">
        <RadioCardLabel>ルドマン</RadioCardLabel>
        <RadioCardDescription>
          なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。
        </RadioCardDescription>
      </RadioCard>
    </RadioCardGroup>

    <RadioCardGroup isDisabled items={items} />

    <Fieldset isDisabled legend="Which characters would you like to select?">
      <RadioCardGroup items={items} />
    </Fieldset>
  </VStack>
)
Copied!

読み取り専用にする

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

編集可能な例

const items = useMemo<RadioCardItem[]>(
  () => [
    { label: "ビアンカ", value: "ビアンカ" },
    { label: "フローラ", value: "フローラ" },
    { label: "ルドマン", value: "ルドマン" },
  ],
  [],
)

return (
  <VStack>
    <RadioCardGroup defaultValue="ビアンカ">
      <RadioCard isReadOnly value="ビアンカ">
        <RadioCardLabel>ビアンカ</RadioCardLabel>
        <RadioCardDescription>
          パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。
        </RadioCardDescription>
      </RadioCard>

      <RadioCard value="フローラ">
        <RadioCardLabel>フローラ</RadioCardLabel>
        <RadioCardDescription>
          大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。
        </RadioCardDescription>
      </RadioCard>

      <RadioCard value="ルドマン">
        <RadioCardLabel>ルドマン</RadioCardLabel>
        <RadioCardDescription>
          なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。
        </RadioCardDescription>
      </RadioCard>
    </RadioCardGroup>

    <RadioCardGroup isReadOnly items={items} />

    <Fieldset isReadOnly legend="Which characters would you like to select?">
      <RadioCardGroup items={items} />
    </Fieldset>
  </VStack>
)
Copied!

無効な入力にする

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

編集可能な例

const items = useMemo<RadioCardItem[]>(
  () => [
    { label: "ビアンカ", value: "ビアンカ" },
    { label: "フローラ", value: "フローラ" },
    { label: "ルドマン", value: "ルドマン" },
  ],
  [],
)

return (
  <VStack>
    <RadioCardGroup defaultValue="ビアンカ">
      <RadioCard isInvalid value="ビアンカ">
        <RadioCardLabel>ビアンカ</RadioCardLabel>
        <RadioCardDescription>
          パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。
        </RadioCardDescription>
      </RadioCard>

      <RadioCard value="フローラ">
        <RadioCardLabel>フローラ</RadioCardLabel>
        <RadioCardDescription>
          大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。
        </RadioCardDescription>
      </RadioCard>

      <RadioCard value="ルドマン">
        <RadioCardLabel>ルドマン</RadioCardLabel>
        <RadioCardDescription>
          なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。
        </RadioCardDescription>
      </RadioCard>
    </RadioCardGroup>

    <RadioCardGroup variant="surface" isInvalid items={items} />

    <Fieldset
      errorMessage="This is required."
      isInvalid
      legend="Which characters would you like to select?"
    >
      <RadioCardGroup items={items} />
    </Fieldset>
  </VStack>
)
Copied!

ラベルをカスタマイズする

編集可能な例

const items = useMemo<RadioCardItem[]>(
  () => [
    {
      label: (
        <VStack alignItems="center" gap="sm">
          <ChartLineIcon color="muted" fontSize="3xl" />
          <Text>Line Chart</Text>
        </VStack>
      ),
      value: "Line Chart",
    },
    {
      label: (
        <VStack alignItems="center" gap="sm">
          <ChartColumnIcon color="muted" fontSize="3xl" />
          <Text>Bar Chart</Text>
        </VStack>
      ),
      value: "Bar Chart",
    },
    {
      label: (
        <VStack alignItems="center" gap="sm">
          <ChartAreaIcon color="muted" fontSize="3xl" />
          <Text>Area Chart</Text>
        </VStack>
      ),
      value: "Area Chart",
    },
  ],
  [],
)

return (
  <RadioCardGroup
    items={items}
    labelProps={{ flexDirection: "column", gap: "sm" }}
  />
)
Copied!

編集可能な例

<RadioCardGroup>
  <RadioCard
    description="This user can access the system"
    label={
      <VStack gap="sm">
        <ArrowRightIcon fontSize="2xl" />
        <Text>Arrow</Text>
      </VStack>
    }
    value="Arrow"
    labelProps={{
      alignItems: "start",
    }}
  />
  <RadioCard
    description="This user will be denied access to the system"
    label={
      <VStack gap="sm">
        <ShieldOffIcon fontSize="2xl" />
        <Text>Deny</Text>
      </VStack>
    }
    value="Deny"
    labelProps={{
      alignItems: "start",
    }}
  />
  <RadioCard
    description="This user will be locked out of the system"
    label={
      <VStack gap="sm">
        <LockIcon fontSize="2xl" />
        <Text>Lock</Text>
      </VStack>
    }
    value="Lock"
    labelProps={{
      alignItems: "start",
    }}
  />
</RadioCardGroup>
Copied!

編集可能な例

<RadioCardGroup w="fit-content" withIcon={false}>
  <RadioCard value="Rabbit">
    <RadioCardLabel>
      <HStack gap="sm">
        <RabbitIcon color="muted" fontSize="2xl" />
        <Text>Rabbit</Text>
      </HStack>
    </RadioCardLabel>
  </RadioCard>

  <RadioCard value="Snail">
    <HStack gap="sm">
      <SnailIcon color="muted" fontSize="2xl" />
      <Text>Snail</Text>
    </HStack>
  </RadioCard>

  <RadioCard value="Squirrel">
    <RadioCardLabel>
      <HStack gap="sm">
        <SquirrelIcon color="muted" fontSize="2xl" />
        <Text>Squirrel</Text>
      </HStack>
    </RadioCardLabel>
  </RadioCard>
</RadioCardGroup>
Copied!

制御する

編集可能な例

const [value, setValue] = useState<string>("フローラ")

const items = useMemo<RadioCardItem[]>(
  () => [
    { label: "ビアンカ", value: "ビアンカ" },
    { label: "フローラ", value: "フローラ" },
    { label: "ルドマン", value: "ルドマン" },
  ],
  [],
)

return <RadioCardGroup items={items} value={value} onChange={setValue} />
Copied!

React Hook Formを使う

編集可能な例

type Data = { radioCard: string }

const {
  control,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm<Data>()

const items = useMemo<RadioCardItem[]>(
  () => [
    { label: "ビアンカ", value: "ビアンカ" },
    { label: "フローラ", value: "フローラ" },
    { label: "ルドマン", value: "ルドマン" },
  ],
  [],
)

const onSubmit = (data) => console.log("submit:", data)

console.log("watch:", watch())

return (
  <VStack as="form" onSubmit={handleSubmit(onSubmit)}>
    <Fieldset
      isInvalid={!!errors.radioCard}
      legend="Who is your favorite character?"
      errorMessage={errors.radioCard ? errors.radioCard.message : undefined}
    >
      <Controller
        name="radioCard"
        control={control}
        rules={{ required: { value: true, message: "This is required." } }}
        render={({ field }) => <RadioCardGroup {...field} items={items} />}
      />
    </Fieldset>

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

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

前Radio次Checkbox