Switch
即座に効く設定に使う。保存ボタンが必要なものは Checkbox にする。Raster では矩形で表示されるため、状態のラベル併記を強く推奨する。
デモ
import { Switch } from '@novi-ui/raster'
<Switch defaultSelected>メール通知を受け取る</Switch>
Props
| 名前 | 型 | 説明 |
|---|---|---|
| size | 'sm' | 'md' | 'lg' | |
| color | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | |
| name | string | |
| value | string | |
| isSelected | boolean | |
| defaultSelected | boolean | |
| onChange | (isSelected: boolean) => void | |
| isDisabled | boolean | |
| isReadOnly | boolean | |
| description | ReactNode | |
| children | ReactNode | |
| classNames | ClassNames<typeof switchSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- track必須
- thumb必須
- label
- description
アクセシビリティ
- Space で切り替える。状態は `aria-checked` で伝わるが、色と形だけに依存せずラベルを併記する
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。