セグメント切替SegmentedControlExperimental
少数の選択肢から1つを選ぶ、等幅セグメント型のコントロールです。
プレビュー
選択中: 旅客=adult / 支払い=ic
状態とバリエーション
標準
等幅セグメントで、短い選択肢から1つを選びます。
選択中: 旅客=adult / 支払い=ic
コンパクト
ツールバーや狭い領域では sm と fullWidth={false} を使います。
タッチ向け
モバイルやタッチ前提の入力では lg で操作面を広げます。
無効化
変更できない理由を、無効なコントロールを包むツールチップで説明します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| options | SegmentedControlOption[] | - | 表示するセグメントです。2〜4件程度の短い選択肢に向いています。 |
| value / defaultValue | string | - | 制御状態または非制御の初期値です。選択値は常に単一の string です。 |
| onValueChange | (value: string) => void | - | 選択が変わった時に呼ばれます。 |
| size | "sm" | "default" | "lg" | "default" | セグメントの高さと余白です。タッチ操作を重視する場合は lg を使います。 |
| fullWidth | boolean | true | 各セグメントを等幅で横幅いっぱいに広げます。 |
| disabled | boolean | false | 全体を無効化します。理由が必要な場合はツールチップで補足します。 |
| aria-label | string | - | radiogroup のアクセシブル名です。 |
使い方
import * as React from "react";
import { SegmentedControl } from "@gunjo/ui";
export function SegmentedControlExample() {
const [passenger, setPassenger] = React.useState("adult");
const [payment, setPayment] = React.useState("ic");
return (
<div className="flex w-full max-w-sm flex-col gap-4">
<label className="flex flex-col gap-1.5">
<span className="text-sm font-medium text-foreground">旅客区分</span>
<SegmentedControl
aria-label="旅客区分"
value={passenger}
onValueChange={setPassenger}
options={[
{ value: "adult", label: "大人" },
{ value: "child", label: "小児" },
{ value: "discount", label: "割引" },
]}
/>
</label>
<label className="flex flex-col gap-1.5">
<span className="text-sm font-medium text-foreground">支払い方法</span>
<SegmentedControl
aria-label="支払い方法"
value={payment}
onValueChange={setPayment}
options={[
{ value: "cash", label: "現金" },
{ value: "ic", label: "IC" },
{ value: "qr", label: "QR" },
]}
/>
</label>
<p className="text-xs text-muted-foreground" aria-live="polite">
選択中: 旅客={passenger} / 支払い={payment}
</p>
</div>
);
}