Switch

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}
/>