Switch

Forms 4

About

Here is Switch component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Switch to your project and fits it to your theme.

Code

How Switch is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client'

import { useId, useState } from 'react'

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

const SwitchDualToggleLabelDemo = () => {
  const id = useId()
  const [checked, setChecked] = useState(false)

  const toggleSwitch = () => setChecked(prev => !prev)

  return (
    <div className='group inline-flex items-center gap-2' data-state={checked ? 'checked' : 'unchecked'}>
      <span
        id={`${id}-yes`}
        className='group-data-[state=checked]:text-muted-foreground/70 cursor-pointer text-right text-sm font-medium'
        aria-controls={id}
        onClick={() => setChecked(false)}
      >
        Yes
      </span>
      <Switch id={id} checked={checked} onCheckedChange={toggleSwitch} aria-labelledby={`${id}-yes ${id}-no`} />
      <span
        id={`${id}-no`}
        className='group-data-[state=unchecked]:text-muted-foreground/70 cursor-pointer text-left text-sm font-medium'
        aria-controls={id}
        onClick={() => setChecked(true)}
      >
        No
      </span>
    </div>
  )
}

export default SwitchDualToggleLabelDemo