ラジオグループRadioGroupBeta

いずれか1つだけ選択できるラジオボタン群です。

プレビュー

状態とバリエーション

説明付き選択肢

見出しと補足を含めると、選択肢の違いを比較しやすくなります。

横並び

密度や表示モードのような短い排他的選択では、横並びが使えます。

選択肢の無効化

選べない理由はツールチップで伝えます。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
defaultValuestring-内部状態で使う場合に、初期選択する項目の値です。
valuestring-外部から渡す選択値です。
onValueChange(value: string) => void-選択値が変わった時に呼ばれます。
disabledbooleanfalseRadioGroup に渡すと全項目を、RadioGroupItem に渡すとその項目を無効化します。祖先の <fieldset disabled> も同様に尊重され、各 radio は aria-disabled になり roving tabindex から外れます。(#273)

使い方

import { Label, RadioGroup, RadioGroupItem } from "@gunjo/ui";

export function PlanPicker() {
  return (
    <RadioGroup defaultValue="standard">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="basic" id="plan-basic" />
        <Label htmlFor="plan-basic">ベーシック</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="standard" id="plan-standard" />
        <Label htmlFor="plan-standard">スタンダード</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="team" id="plan-team" />
        <Label htmlFor="plan-team">チーム</Label>
      </div>
    </RadioGroup>
  );
}

使用コンポーネント

RadioGroupRadioGroupItemLabel

関連コンポーネント

CheckboxSwitchToggleGroupForm

設計の判断（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: RadioGroup