セグメント切替SegmentedControlExperimental
The small inline single-select toggle: 2–4 equal-width segments on a recessed track, the active one raised (the iOS/Android segmented look). For the compact either/or choices a B2C form is full of — 旅客区分 (大人/小児), 支払い (現金/IC/QR), 片道/往復, 出発/到着, 個人/法人, 日/週/月. A real role=radiogroup with role=radio segments, roving tabindex + arrow-key nav (WAI-ARIA), and a colour-safe selected state (raised surface, not colour alone); onValueChange is always a single string. Distinct from ToggleGroup (the general, content-fit, single-OR-multi toggle for desktop filters/formatting) and RadioCard (the large, priced choice CARD) — this is the small equal-width mode/segment switch. options[] of {value,label,icon?,disabled?}; controlled (value) or uncontrolled (defaultValue).
プレビュー
Props
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| options | SegmentedControlOption[] | - | セグメント（2〜4が適量）。各 { value, label, icon?, disabled? }。 |
| value | string | - | 制御された選択値。 |
| defaultValue | string | - | 非制御の初期値。 |
| onValueChange | (value: string) => void | - | 選択値で発火＝常に単一の string（配列にならない）。 |
| size | "sm" | "default" | "lg" | "default" | セグメント高さ（default=h-9 / lg=h-11≥44px タッチ）。 |
| fullWidth | boolean | true | 等幅セグメントで横幅いっぱい（セグメント表示）。 |
| disabled | boolean | false | コントロール全体を無効化。 |
| aria-label | string | - | グループのアクセシブル名。 |
| SegmentedControlOption.value / label | string / ReactNode | - | 選択時の値・セグメントのラベル。 |
| SegmentedControlOption.icon / disabled | ReactNode / boolean | - | 先頭アイコン・この1セグメントのみ無効化。 |
Usage
import { SegmentedControl } from "@gunjo/ui"
const [passenger, setPassenger] = React.useState("adult")
<SegmentedControl
aria-label="旅客区分"
value={passenger}
onValueChange={setPassenger} // always a single string
options={[
{ value: "adult", label: "大人" },
{ value: "child", label: "小児" },
{ value: "disabled", label: "障がい者" },
]}
/>