複数選択カードCheckboxCardExperimental
Multi-select choice cards with independent checkbox semantics, square check indicators, rich card content slots, form values, and disabled-reason tooltips.
プレビュー
状態とバリエーション
複数選択
RadioCard と違い、複数を同時に選べます。選択はスクエアのチェックで示します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| CheckboxCardGroup value / defaultValue | string[] | - | 選択中の値の集合。制御(value)・非制御(defaultValue)どちらも可。 |
| CheckboxCardGroup onValueChange | (value: string[]) => void | - | 選択が変わるたびに新しい配列で呼ばれます。 |
| CheckboxCardGroup name | string | - | 各カードが hidden checkbox を出力し、フォーム送信に載せます。 |
| value | string | - | このカードが選択にトグルする値です。 |
| title | ReactNode | - | 主行（オプション名）。 |
| description | ReactNode | - | 副行（条件・期間など）。 |
| tags / price / highlight / leading | ReactNode | - | チップ列・価格・おトク訴求・先頭アクセサリ（RadioCard と同じ body スロット）。 |
| disabled / disabledReason | boolean / ReactNode | - | 選択不可＋理由をツールチップで説明します。 |
使い方
import * as React from "react";
import { Badge, CheckboxCard, CheckboxCardGroup } from "@gunjo/ui";
const addons = [
{ value: "insurance", title: "Travel insurance", description: "Injury & cancellation cover", price: "$5", tag: <Badge variant="info">Popular</Badge> },
{ value: "seat", title: "Seat selection", description: "Choose window or aisle", price: "$3" },
{ value: "meal", title: "In-flight meal", description: "Japanese or Western", price: "$12", highlight: "$2 off when pre-ordered" },
{ value: "lounge", title: "Lounge access", description: "One departure lounge visit", price: "$20", disabled: true, disabledReason: "Not available on this plan." },
];
export function AddonPicker() {
const [selected, setSelected] = React.useState<string[]>(["insurance"]);
return (
<CheckboxCardGroup value={selected} onValueChange={setSelected} aria-label="Add-ons" name="addons">
{addons.map((a) => (
<CheckboxCard
key={a.value}
value={a.value}
title={a.title}
description={a.description}
price={a.price}
tags={a.tag}
highlight={a.highlight}
disabled={a.disabled}
disabledReason={a.disabledReason}
/>
))}
</CheckboxCardGroup>
);
}