選択カードRadioCardBeta
価格や説明を含むカード型の単一選択肢を、radiogroup として扱う入力カードです。
プレビュー
状態とバリエーション
選択中
選択状態は ring とチェックで示し、色だけに依存しません。
無効化理由
選べない選択肢は disabledReason で理由を必ず説明します。
先頭アクセサリ
交通手段やプラン種別を示すアイコンを先頭に置けます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| RadioCardGroup.value / defaultValue | string | - | 制御/非制御の選択値です。 |
| RadioCardGroup.onValueChange | (value: string) => void | - | 選択変更時に呼ばれます。 |
| RadioCardGroup.name | string | - | フォーム送信用の name です。各カードが hidden radio input を出します。 |
| RadioCard.value | string | - | このカードが選択する値です。 |
| title / description | ReactNode | - | 選択肢の主行と副行です。 |
| tags | ReactNode | - | 人気、期間限定などのチップ列です。 |
| price | ReactNode | - | 右寄せで強調する価格です。 |
| highlight | ReactNode | - | おトクや条件の補足行です。 |
| leading | ReactNode | - | 先頭アイコンやサムネイルです。 |
| disabledReason | ReactNode | - | disabled 時に hover/focus で表示する理由です。 |
使い方
import * as React from "react";
import { Badge, RadioCard, RadioCardGroup } from "@gunjo/ui";
const tickets = [
{ value: "toku", title: "都区内パス", description: "JR東京都区内 1日乗り放題", price: "¥760", highlight: "3回乗ればモト", tag: <Badge variant="info">人気</Badge> },
{ value: "holiday", title: "休日おでかけパス", description: "首都圏フリーエリア・土休日限定", price: "¥2,720", highlight: "約1,000円分おトク", tag: <Badge variant="success">観光向け</Badge> },
{ value: "metro24", title: "東京メトロ 24時間券", description: "東京メトロ全線 24時間", price: "¥600", highlight: "4回乗ればモト" },
];
export function TicketChoice() {
const [value, setValue] = React.useState("holiday");
return (
<div className="w-full max-w-md">
<RadioCardGroup value={value} onValueChange={setValue} aria-label="おトクなきっぷ" name="ticket">
{tickets.map((ticket) => (
<RadioCard
key={ticket.value}
value={ticket.value}
title={ticket.title}
description={ticket.description}
tags={ticket.tag}
price={ticket.price}
highlight={ticket.highlight}
/>
))}
</RadioCardGroup>
</div>
);
}設計の判断
- カードの見た目でも、中身はラジオボタンにした。一片は
role="radio"とaria-checkedを持つbuttonで、群にはrole="radiogroup"と矢印キーの移動（Home と End つき）が付いています。見た目がカードでも、キーボードの動きは選択の意味に合わせます。 ListCardのonSelectとは別物にした。ListCardの選択はaria-pressedの切り替えで、押せば解除もできます。こちらは必ず1つだけ選ぶ形なので、別の部品にしました。同じ「押せるカード」でも、意味が違えば部品を分けます。- 値段の置き場所を先に決めておいた。
priceは右上の太い等幅数字、highlight（おトクの一言）はその下の小さな行、と場所が固定です。プランを縦に並べたときに、値段の位置が行ごとにずれないようにするためです。
一般のカードの設計は UIXHERO の「カード」にあります。 UIXHERO: カード（Card）
使用コンポーネント
関連コンポーネント
設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。