1.3k

Switch

A control that allows the user to toggle between checked and not checked.

Docs API Reference 
import { Label } from "~/components/ui/label"
import { Switch } from "~/components/ui/switch"

export function SwitchDemo() {
  return (
    <div class="flex items-center gap-2">
      <Switch id="airplane-mode" />
      <Label for="airplane-mode">Airplane Mode</Label>
    </div>
  )
}

Installation

CLI

Manual

Install the following dependencies:

Copy and paste the following code into your project.

switch.tsx
import type { Component, ValidComponent } from "solid-js"
import { splitProps } from "solid-js"


import * as SwitchPrimitive from "@kobalte/core/switch"


import { cn } from "~/lib/utils"


type SwitchProps<T extends ValidComponent = "div"> = SwitchPrimitive.SwitchRootProps<T> & {
  class?: string
}


const Switch: Component<SwitchProps> = (props) => {
  const [local, others] = splitProps(props, ["class"])
  return (
    <SwitchPrimitive.Root data-slot="switch" {...others}>
      <SwitchPrimitive.Input
        class={cn(
          "outline-none [&:focus-visible+div]:border-ring [&:focus-visible+div]:ring-[3px] [&:focus-visible+div]:ring-ring/50"
        )}
      />
      <SwitchPrimitive.Control
        class={cn(
          "inline-flex h-[1.15rem] w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-input shadow-xs transition-all data-[disabled]:cursor-not-allowed data-[checked]:bg-primary data-[disabled]:opacity-50 dark:bg-input/80 dark:data-[checked]:bg-primary",
          local.class
        )}
        data-slot="switch-control"
      >
        <SwitchPrimitive.Thumb
          class={cn(
            "pointer-events-none block size-4 translate-x-0 rounded-full bg-background shadow-lg ring-0 transition-transform data-[checked]:translate-x-[calc(100%-2px)] dark:bg-foreground dark:data-[checked]:bg-primary-foreground"
          )}
          data-slot="switch-thumb"
        />
      </SwitchPrimitive.Control>
    </SwitchPrimitive.Root>
  )
}


export { Switch }

Usage

import { Switch } from "~/components/ui/switch";
<Switch />