Segmented Control

少数の選択肢から1つを選ぶボタンの列。選んでいる印が次の選択肢へ滑って移る。

インポート

import { SegmentedControl } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { SegmentedControl } from '@caroainc/ui-components/segmented-control'

基本的な使い方

選択肢が2〜5個ほどで、全部を並べて見せたいときに使います。選び直すと、選んでいる印（白い面）が次の選択肢へ滑って少し弾んで止まります。最初の表示や画面幅の変化では動きません。

const [parking, setParking] = useState('unknown')

<SegmentedControl
  aria-label="駐車場"
  value={parking}
  onValueChange={setParking}
  options={[
    { value: 'unknown', label: '不明' },
    { value: 'yes', label: 'あり' },
    { value: 'no', label: 'なし' },
  ]}
/>

弾み方

bounceで、印が移るときの弾み方を選びます。noneは弾まずに減速して止まります。動きを減らす設定（prefers-reduced-motion）の利用者には、どの値でも動かさずに切り替えます。

<SegmentedControl bounce="none" ... />
<SegmentedControl bounce="subtle" ... /> {/* 既定 */}
<SegmentedControl bounce="medium" ... />
<SegmentedControl bounce="strong" ... />

サイズ

<SegmentedControl size="sm" ... />
<SegmentedControl ... /> {/* default */}

無効状態

<SegmentedControl options={[{ value: 'standing', label: '立ち歩き', disabled: true }, ...]} />
<SegmentedControl disabled ... />

使い分け

選択肢が多い・長い場合はSelectかCommandComboboxを使う（幅が足りないと折り返して並ぶ）
表示する内容（パネル）を切り替える場合はTabsを使う（見た目は似ているが、Tabsは「表示の切り替え」、SegmentedControlは「値を選ぶ」）
中身はラジオボタン（RadioGroupと同じRadixの部品）。選択肢に説明文を付けて縦に並べたい場合はRadioGroupを使う
キーボードは矢印キーで前後の選択肢へ移り、そのまま選ぶ（ラジオボタンと同じ操作）

Props

Prop	Type	Default	Description
`options`	`{ value: string; label: ReactNode; disabled?: boolean }[]`	`-`	選択肢（必須）
`value`	`string`	`-`	選んでいる値（制御コンポーネント）
`defaultValue`	`string`	`-`	初期値（非制御コンポーネント）
`onValueChange`	`(value: string) => void`	`-`	選び直したときのコールバック。同じ選択肢を押しても呼ばない
`bounce`	`'none' \| 'subtle' \| 'medium' \| 'strong'`	`'subtle'`	印が移るときの弾み方
`size`	`'sm' \| 'default'`	`'default'`	選択肢の高さと左右の余白
`disabled`	`boolean`	`false`	すべての選択肢を無効にする
`aria-label`	`string`	`-`	グループの名前（読み上げ用）。見出しと結び付ける場合はaria-labelledby

ScrollArea

カスタムスクロールバー付きのスクロール領域コンポーネント。

Sortable

縦に並んだ行を、取っ手のドラッグか上下キーで並べ替える一覧。