Switch

A control that allows the user to toggle between on and off states.

Examples

Default

Airplane Mode 
<div class="flex flex-col gap-6">
  <div class="flex items-center gap-3">
    <c-switch-element id="demo-1"></c-switch-element>
    <c-label label-for="demo-1">Airplane Mode</c-label>
  </div>
</div>

With Label

Enable notifications
Marketing emails

Receive emails about new products, features, and more. 

<div class="flex flex-col gap-6">
  <div class="flex items-center gap-3">
    <c-switch-element id="switch-with-label"></c-switch-element>
    <c-label label-for="switch-with-label">Enable notifications</c-label>
  </div>
  <div class="flex items-start gap-3">
    <c-switch-element id="switch-with-description" checked></c-switch-element>
    <div class="grid gap-2">
      <c-label label-for="switch-with-description">Marketing emails</c-label>
      <p class="text-muted-foreground text-sm">
        Receive emails about new products, features, and more.
      </p>
    </div>
  </div>
</div>

Checked

Airplane Mode 
<div class="flex items-center gap-3">
  <c-switch-element id="switch-checked" checked></c-switch-element>
  <c-label label-for="switch-checked">Airplane Mode</c-label>
</div>

Disabled

Disabled (Off)
Disabled (On) 
<div class="flex flex-col gap-6">
  <div class="flex items-center gap-3">
    <c-switch-element id="switch-disabled-off" disabled></c-switch-element>
    <c-label label-for="switch-disabled-off">Disabled (Off)</c-label>
  </div>
  <div class="flex items-center gap-3">
    <c-switch-element
      id="switch-disabled-on"
      disabled
      checked
    ></c-switch-element>
    <c-label label-for="switch-disabled-on">Disabled (On)</c-label>
  </div>
</div>

Form Example

Email Notifications

Configure your email notification preferences.

Marketing emails

Receive emails about new products and features.

Social emails

Receive emails for friend requests and more.

Security emails

Receive emails about your account security.

<div class="flex flex-col gap-4 rounded-lg border p-4 max-w-md">
  <div>
    <h3 class="text-lg font-medium">Email Notifications</h3>
    <p class="text-sm text-muted-foreground">
      Configure your email notification preferences.
    </p>
  </div>
  <div class="flex flex-col gap-4">
    <div class="flex items-center justify-between">
      <div class="flex flex-col gap-1">
        <c-label label-for="notif-marketing">Marketing emails</c-label>
        <p class="text-sm text-muted-foreground">
          Receive emails about new products and features.
        </p>
      </div>
      <c-switch-element id="notif-marketing" checked></c-switch-element>
    </div>
    <div class="flex items-center justify-between">
      <div class="flex flex-col gap-1">
        <c-label label-for="notif-social">Social emails</c-label>
        <p class="text-sm text-muted-foreground">
          Receive emails for friend requests and more.
        </p>
      </div>
      <c-switch-element id="notif-social"></c-switch-element>
    </div>
    <div class="flex items-center justify-between">
      <div class="flex flex-col gap-1">
        <c-label label-for="notif-security">Security emails</c-label>
        <p class="text-sm text-muted-foreground">
          Receive emails about your account security.
        </p>
      </div>
      <c-switch-element id="notif-security" checked></c-switch-element>
    </div>
  </div>
</div>

API Reference

Switch

A switch component that allows users to toggle between on and off states.

Prop Type Default Description
checked boolean false Whether the switch is checked (on)
disabled boolean false Whether the switch is disabled
name string - The name attribute for the switch
value string - The value attribute for the switch
aria-label string - Accessible label for the switch
switch-classes string - Additional CSS classes to apply to the switch

Events

change

Fired when the switch state changes.

Detail:

  • checked (boolean) - The new checked state
switchElement.addEventListener('change', (event) => {
  console.log('Checked:', event.detail.checked);
});