Switch
NEWオン/オフを切り替えるトグルスイッチコンポーネント
Basic
基本的なスイッチ
With Label
ラベル付きスイッチ
Sizes
3つのサイズオプション
Small
Medium (Default)
Large
States
様々な状態
Controlled
状態を制御
Feature Flag
Status: Disabled
Use Cases
実際の使用例
Push Notifications
Receive push notifications on your device
Email Notifications
Receive email updates about your account
Marketing Emails
Receive emails about new features and offers
Usage
コンポーネントの使用例
tsx
class="token keyword">import { Switch } class="token keyword">from class="token keyword">class="token string">"@/components/ui";
class="token keyword">import { useSignal } class="token keyword">from class="token keyword">class="token string">"@builder.io/qwik";
class="token keyword">class=class="token keyword">class="token string">"token comment">// Basic
<class="token tag">Switch />
<class="token tag">Switch checked />
class="token keyword">class=class="token keyword">class="token string">"token comment">// With label
<class="token tag">Switch label=class="token keyword">class="token string">"Enable feature" />
class="token keyword">class=class="token keyword">class="token string">"token comment">// Sizes
<class="token tag">Switch size=class="token keyword">class="token string">"sm" />
<class="token tag">Switch size=class="token keyword">class="token string">"md" />
<class="token tag">Switch size=class="token keyword">class="token string">"lg" />
class="token keyword">class=class="token keyword">class="token string">"token comment">// Disabled
<class="token tag">Switch disabled />
class="token keyword">class=class="token keyword">class="token string">"token comment">// Controlled
class="token keyword">const enabled = class="token function">useSignal(class="token keyword">false);
<class="token tag">Switch
checked={enabled.value}
onChange$={(checked) => enabled.value = checked}
/>Props
コンポーネントのプロパティ
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | false | 初期状態 |
| label | string | - | ラベルテキスト |
| size | "sm" | "md" | "lg" | "md" | スイッチのサイズ |
| disabled | boolean | false | 無効状態 |
| onChange$ | QRL<(checked: boolean) => void> | - | 変更時のコールバック |