Switch 8

PreviousNext

A switch with dynamic label that changes text based on toggle state (Yes/No)

Docs
shadcn-studiocomponent

Preview

Loading preview…
registry/new-york/components/switch/switch-08.tsx
'use client'

import { useState } from 'react'

import { Label } from '@/registry/new-york/ui/label'
import { Switch } from '@/registry/new-york/ui/switch'

const SwitchToggleLabelDemo = () => {
  const [checked, setChecked] = useState<boolean>(true)

  return (
    <div className='inline-flex items-center gap-2'>
      <Switch id='toggle-label' checked={checked} onCheckedChange={setChecked} aria-label='Toggle switch label' />
      <Label htmlFor='toggle-label' className='text-sm font-medium'>
        {checked ? 'Yes' : 'No'}
      </Label>
    </div>
  )
}

export default SwitchToggleLabelDemo

Installation

npx shadcn@latest add @shadcn-studio/switch-08

Usage

import { Switch08 } from "@/components/switch-08"
<Switch08 />