BlueAI Toggle
ON/OFFを切り替えるスライドスイッチ。ラベルと説明文付きレイアウトに対応。
|
import { Toggle } from "@blueai/ui"Examples
Basic
<Toggle checked={value} onChange={setValue} />With label
メール通知
新しいメッセージを受信したときにメールで通知します。
<Toggle checked={value} onChange={setValue} label="メール通知" description="新しいメッセージを受信したときにメールで通知します。" />Small & Disabled
Small toggle
Disabled toggle
<Toggle checked={false} onChange={() => {}} size="sm" />
<Toggle checked={true} onChange={() => {}} disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked* | boolean | — | ON/OFF状態 |
| onChange* | (checked: boolean) => void | — | 状態変更コールバック |
| label | string | — | ラベル |
| description | string | — | 説明文 |
| disabled | boolean | — | 無効状態 |
| size | "sm" | "md" | — | サイズ（デフォルト: md） |