Caroa UI

Switch

オン/オフを切り替えるスイッチコンポーネント。

インポート

import { Switch } from '@caroainc/ui-components/client'

基本的な使い方

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

PropTypeDefaultDescription
checkedboolean-スイッチ状態(制御コンポーネント)
defaultCheckedboolean-初期スイッチ状態
onCheckedChange(checked: boolean) => void-状態変更時のコールバック
disabledbooleanfalse無効状態

On this page