選択カードRadioCardExperimental
The priced selectable choice card: RadioGroup's single-select role=radio + keyboard semantics (radiogroup, roving tabindex, arrow keys) wearing a card body — tags, title, secondary (area・period), a dominant price slot, an おトク/highlight hook, leading accessory — with a built-in selected check + ring. The B2C purchase / plan-picker / shipping-option / payment-method atom. Use this for pick-one-of-many (NOT ListCard, whose onSelect is an aria-pressed toggle, not radio single-select; NOT RadioGroup, which is a bare 16px dot + label). ≥44px tap target; selection marked by a check, not colour alone. RadioCardGroup (value/onValueChange/name) wraps the RadioCards.
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| RadioCardGroup.value | string | - | 選択中の value（controlled）。 |
| RadioCardGroup.defaultValue | string | - | 非制御の初期値。 |
| RadioCardGroup.onValueChange | (value: string) => void | - | 選択変更ハンドラ。 |
| RadioCardGroup.name | string | - | フォーム送信名（各 RadioCard が隠し input を出す）。 |
| RadioCard.value | string | - | このカードが選択する値（必須）。 |
| RadioCard.title | ReactNode | - | 主要行（商品名/プラン名）。 |
| RadioCard.description | ReactNode | - | 副次行（エリア・期間・条件）。 |
| RadioCard.tags | ReactNode | - | タイトル上のチップ列（人気/期間限定/おすすめ）。 |
| RadioCard.price | ReactNode | - | 強調表示する価格スロット（右寄せ・太字）。 |
| RadioCard.highlight | ReactNode | - | おトクのフック行（○○円分おトク / ○回でモト）。 |
| RadioCard.leading | ReactNode | - | 先頭のアクセサリ（アイコン/サムネ）。 |
Usage
import { RadioCardGroup, RadioCard, Badge, formatCurrency } from "@gunjo/ui"
<RadioCardGroup value={value} onValueChange={setValue} aria-label="おトクなきっぷ">
<RadioCard
value="holiday"
title="休日おでかけパス"
description="首都圏フリーエリア・土休日限定"
tags={<Badge variant="success">観光向け</Badge>}
price={formatCurrency(2720)}
highlight="約1,000円分おトク"
/>
<RadioCard value="metro24" title="東京メトロ 24時間券"
description="東京メトロ全線 24時間" price={formatCurrency(600)} highlight="4回乗ればモト" />
</RadioCardGroup>