Switch

Name: FivUI
Author: Fivex Labs

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

Airplane Mode

tsx

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

export function SwitchDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane Mode</Label>
    </div>
  )
}

Installation

CLI

bash

npx fivui add switch

Manual

Copy and paste the following code into your project.

bash

npm install @radix-ui/react-switch

components/ui/switch.tsx

"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

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

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }

Usage

tsx

import { Switch } from "@/components/ui/switch"

<Switch />

API Reference

Switch

Prop	Type	Default	Description
`checked`	`boolean`	-	The controlled checked state of the switch
`defaultChecked`	`boolean`	-	The checked state of the switch when it is initially rendered
`onCheckedChange`	`function`	-	Event handler called when the checked state of the switch changes
`disabled`	`boolean`	`false`	When true, prevents the user from interacting with the switch
`required`	`boolean`	`false`	When true, indicates that the user must check the switch before the owning form can be submitted

For more detailed information about all available props and behaviors, refer to the Radix UI documentation.

View Radix Docs