トグル
丸みのあるスイッチです。オンは濃い色でつまみが右、オフは淡い色でつまみが左。つまみはスプリングの曲線で動きます。システムの中でオーバーシュートするのはここだけで、背景の色は直線的に変わります。
バリエーション
プロパティ
コード
import { Toggle } from "@/components/ui/kit/forms";
<Toggle checked={true} onChange={setChecked} label="オン" />すべての状態
Toggle
通常
ホバー
フォーカス
押下中
無効
使い方
使っているトークン
| --ink | … |
|---|---|
| --paper | … |
| --spark | … |
| --line-control | … |
| --ink-2 | … |
| --font-label | … |
| --dur-base | … |
| --dur-quick | … |
| --spring | … |
値はスタイルシートからその場で読み込んでいるため、サイトの表示テーマに合わせて変わります。
仕様
- きっかけ
- 長さ
- --dur-base 240ms
- イージング
- --spring cubic-bezier(0.34, 1.56, 0.64, 1)
- 動きを減らす設定