フィルタチップFilterChipsExperimental
The horizontally-scrollable, single-select category chip bar: the navigation every consumer place / list finder opens with (空港・駅の施設, 食べログ, retail, transit, food delivery). A scroll-snapping row of pill chips (icon + label + optional count) that does NOT center-wrap on a phone, with a fully-filled active chip, roving tabindex + arrow keys, and a hidden scrollbar. value + onValueChange single-select. For 2–3 equal-width segments use ToggleGroup; for a faceted popover filter use FilterButton; this is the many-category scannable rail.
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| items | FilterChip[] | - | チップ。各 { value, label, icon?, count?, disabled? }。 |
| value | string | - | 選択中の value（単一選択）。 |
| onValueChange | (value: string) => void | - | 選択変更ハンドラ。 |
| aria-label | string | "絞り込み" | チップ群のアクセシブル名。 |
Usage
import { FilterChips, type FilterChip } from "@gunjo/ui"
const categories: FilterChip[] = [
{ value: "all", label: "すべて", count: 24 },
{ value: "gate", label: "搭乗口", count: 8 },
{ value: "lounge", label: "ラウンジ", count: 3 },
// …
]
<FilterChips
items={categories}
value={category}
onValueChange={setCategory}
aria-label="施設カテゴリ"
/>