コンポーネント一覧

Switch

即座に効く設定に使う。保存ボタンが必要なものは Checkbox にする。Raster では矩形で表示されるため、状態のラベル併記を強く推奨する。

メール通知を受け取る

import { Switch } from '@novi-ui/raster'

<Switch defaultSelected>メール通知を受け取る</Switch>

例

オンにすると何が起きるかを description で書く。

在庫アラート在庫が 5 点を切ったら通知します

import { Switch } from '@novi-ui/raster'

<Switch defaultSelected description="在庫が 5 点を切ったら通知します">
  在庫アラート
</Switch>

小中大

import { Switch } from '@novi-ui/raster'

<Switch size="sm">小</Switch>
<Switch size="md">中</Switch>
<Switch size="lg">大</Switch>

プランの変更が必要です管理者が固定

import { Switch } from '@novi-ui/raster'

<Switch isDisabled>プランの変更が必要です</Switch>
<Switch isSelected isReadOnly>管理者が固定</Switch>

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>

構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。

キーボード操作
キー	動作
Space	切り替える