SWITCH

Binary toggle built on Radix UI. Displays [OFF] / [ON] text labels instead of a sliding thumb. Green glow on checked state.

DEPS:@radix-ui/react-switch

PREVIEW

TARGETING SYSTEM

SHIELD MATRIX

OFFLINE

INSTALLATION

BASH

npx shadcn@latest add @scificn/switch

USAGE

TSX

import { Switch } from '@/ui/switch'

export function Example() {
  return (
    <Switch
      label="AUTO-PILOT"
      onCheckedChange={(checked) => console.log('auto-pilot:', checked)}
    />
  )
}

STATES

OFF

DISABLED OFF

DISABLED ON

CONTROLLED

TSX

import { useState } from 'react'
import { Switch } from '@/ui/switch'

export function Controlled() {
  const [enabled, setEnabled] = useState(false)
  return (
    <Switch
      label="WARP DRIVE"
      checked={enabled}
      onCheckedChange={setEnabled}
    />
  )
}

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
label	string	—	Optional text label next to the switch. Auto-generates the id/htmlFor binding.
checked	boolean	—	Controlled checked state.
defaultChecked	boolean	false	Initial state (uncontrolled).
onCheckedChange	(checked: boolean) => void	—	Callback fired on state change.
disabled	boolean	false	Disables the switch and reduces opacity.