Switch
オン/オフを切り替えるスイッチコンポーネント。
インポート
import { Switch } from '@caroainc/ui-components/client'個別サブパス(バンドルサイズを抑えたい場合):
import { Switch } from '@caroainc/ui-components/switch'基本的な使い方
Loading...
<div className="flex items-center gap-2">
<Switch id="airplane" />
<Label htmlFor="airplane">機内モード</Label>
</div>デフォルトでオン
Loading...
<Switch defaultChecked />無効状態
Loading...
<Switch disabled />
<Switch disabled defaultChecked />Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | - | スイッチ状態(制御コンポーネント) |
defaultChecked | boolean | - | 初期スイッチ状態 |
onCheckedChange | (checked: boolean) => void | - | 状態変更時のコールバック |
disabled | boolean | false | 無効状態 |
aria-invalid | boolean | - | エラー状態。trueで赤枠のborder/ringが自動適用される(ネイティブ属性) |