kaze風
SegmentedControl
単一選択のセグメント切り替え。期間（1W / 1M / 3M / 1Y）や表示モードの切り替えに。
プレビュー
使いどころ
使う場面
- 表示形式、期間、並び順のように、選んだ瞬間に表示が切り替わる 2 件から 5 件の選択
- 項目を全部見せ、並べて比較して選んでほしいとき
- fullWidth で幅いっぱいに並べると、モバイルでも押しやすい
使わない場面
- 送信ボタンで確定するフォームの 1 項目。Radio か Select を使う
- 選択肢が 6 件以上、またはラベルが長いとき。Select を使う
- 複数選択。FilterPill か Checkbox を使う
- ページや画面の切り替え。Tabs を使う（Tabs はパネルを持ち、URL と結びつく）
- オン・オフの切り替え。Switch を使う
使い方
<SegmentedControl
aria-label="期間"
value={period}
onValueChange={setPeriod}
options={[
{ value: "1w", label: "1W" },
{ value: "1m", label: "1M" },
]}
/>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
options必須 | SegmentedControlOption[] | なし | { value, label, disabled? } の配列 |
value | string | なし | 選択値（controlled） |
defaultValue | string | なし | 初期値（uncontrolled） |
onValueChange | (value: string) => void | なし | 選択変更時のコールバック |
size | "sm" | "md" | "md" | サイズ |
fullWidth | boolean | false | 幅いっぱいに等分して広げる |
name | string | なし | 指定すると hidden input でフォーム送信できる |
aria-label必須 | string | なし | 必須。radiogroup のラベル |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | グループに入る。選択中の項目、なければ最初の有効な項目へ |
| → / ↓ | 次の項目へ移り、選択する。最後からは先頭へ回る |
| ← / ↑ | 前の項目へ移り、選択する。先頭からは最後へ回る |
| Home / End | 最初と最後の有効な項目へ移り、選択する |
アクセシビリティ
- role="radiogroup" の中に role="radio" のボタンが並ぶ。選択中は aria-checked="true"。無効な項目は飛ばされる
- aria-label は必須。何を選ぶ部品かを伝える（「表示形式」）
- 矢印キーで移動すると同時に選択され、onValueChange が呼ばれる。確定が要る操作には向かない
- name を渡すと、選択中の値が hidden の input としてフォームに送られる
文言
- ラベルは 1 語から 3 語の名詞（「日」「週」「月」、「リスト」「カード」）
- 並びは自然な順序にする（短い期間から長い期間へ）。左端を既定値にする