セグメントコントロール

選んだ項目へ、背景がすべるように移ります。パッと切り替わらないので、どこからどこへ移ったかが目で追えます。

バリエーション

プロパティ

valueselect

▾

ariaLabelstring

glyphboolean

コード

import { SegmentedControl } from "@/components/ui/kit/ui";

<SegmentedControl
  value="one"
  ariaLabel="表示を選ぶ"
  options={options}
  onChange={setValue}
/>

すべての状態

使い方

こうする

同じ内容の見せ方を二〜四通り切り替えるときに使います。

こうしない

別のページへの移動には使わない。リンクを使います。
五つ以上の選択肢を詰め込まない。

使っているトークン

使っているトークン
--ink	…
--paper	…
--line-control	…
--line-2	…
--muted	…
--font-label	…
--dur-base	…
--ease-in-out	…

値はスタイルシートからその場で読み込んでいるため、サイトの表示テーマに合わせて変わります。

仕様

きっかけ: 選択
長さ: --dur-base 240ms
イージング: --ease-in-out cubic-bezier(0.65, 0, 0.35, 1)
動きを減らす設定: 背景は、選んだ項目へすぐに移ります。

使っている場所

デザインシステムのページ