ToggleSwitch

toggleswitch-1779393692915.tsx

'use client'
import { useState } from 'react'

export default function ToggleSwitch({ label = 'Enable feature', defaultOn = false, disabled = false }) {
  const [on, setOn] = useState(defaultOn)
  return (
    <label style={{
      display: 'inline-flex', alignItems: 'center', gap: '12px',
      cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1,
    }}>
      <div
        onClick={() => !disabled && setOn(!on)}
        style={{
          width: '48px', height: '26px', borderRadius: '13px',
          background: on ? '#6d28d9' : '#cbd5e1',
          position: 'relative', transition: 'background 0.3s',
        }}
      >
        <div style={{
          position: 'absolute', top: '3px',
          left: on ? '25px' : '3px',
          width: '20px', height: '20px', borderRadius: '50%',
          background: '#fff', boxShadow: '0 1px 4px rgba(0,0,0,0.2)',
          transition: 'left 0.25s ease',
        }} />
      </div>
      <span style={{ fontSize: '14px', fontWeight: 500, color: '#374151' }}>{label}</span>
    </label>
  )
}

Component info

CategoryForms

Frameworkreact

TierFREE

Copies0

About

Animated toggle switch with label and disabled state support

More from Forms

'use client'
import { useState } from 'react'

const STEPS = [
  { title: 'Account', fields: ['name', 'email'] },
  { title: 'Profile', fields: ['role', 'company'] },
  { title: 'Confirm', fields: [] },
]

export default function MultiStepForm() {

MultiStepForm

Forms

'use client'
import { useState } from 'react'

interface FloatingLabelInputProps {
  label?: string
  type?: string
  maxLength?: number
  required?: boolean
  pattern?: string
  helperText?: string
}

export default function FloatingLabelInput({ lab

FloatingLabelInput

Forms

'use client';
import { useState, useEffect } from 'react';

export default function SmartFormField() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showPass, setShowPass] = useState(false);
  cons

SmartFormField

Forms

'use client'
import { useState } from 'react'

const OPTIONS = [
  { value: 'starter', label: 'Starter', desc: 'For individuals' },
  { value: 'pro', label: 'Pro', desc: 'For teams up to 10' },
  { value: 'enterprise', label: 'Enterprise', desc: 'Unl

RadioGroup

Forms