ラジオボタン
React Ariaで実装したラジオグループ。矢印キーでの移動、フォームへの対応、ラベルの関連付けを標準で備えています。選択した丸には、チェックボックスと同じblue/500 → blue/600のグラデーションと内側のハイライトを表示します。md（16px）とsm（14px）の2サイズです。
インストール
CLI または手動でこのラジオコンポーネントを追加できます。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
CLI
手動
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add radio共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
サイズ
2つのサイズを経由して サイズ: プロップ - md の (16px、デフォルト) および サインイン (14px、Figma) radio_selected_sm メニュー内で使用されるグリフ)、ボディ2ラベルと組み合わせました。
<Radio size="md" value="a">Medium</Radio> {/* 16px (default) */}<Radio size="sm" value="b">Small</Radio> {/* 14px */}ラジオカード
タイトルとオプションの記述を備えた選択可能なカード - カード全体がラジオを選択し、チェックボックスカードの表面を一致させます。カードは内部に住んでいます RadioGroup 単一の選択と矢印キーナビゲーション用。 それは別のレジストリ項目です。 npx boardui add radio-card.
import { RadioCard } from "@/components/base/radio/radio-card";import { RadioGroup } from "@/components/base/radio/radio";
<RadioGroup aria-label="Plan" defaultValue="pro"> <RadioCard value="starter" title="Starter" description="For side projects and experiments." /> <RadioCard value="pro" title="Pro" description="For growing teams that need more." /> <RadioCard value="enterprise" title="Enterprise" description="Custom limits and support." isDisabled /></RadioGroup>