SwitchGroup

switchgroup-1779394345278.tsx

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

const SETTINGS = [
  { id:'notifications', label:'Push Notifications', desc:'Receive app notifications', icon:'🔔', default:true },
  { id:'email', label:'Email Digest', desc:'Weekly email summary', icon:'📧', default:true },
  { id:'dark', label:'Dark Mode', desc:'Use dark color theme', icon:'🌙', default:false },
  { id:'analytics', label:'Analytics', desc:'Share usage data', icon:'📊', default:false },
  { id:'beta', label:'Beta Features', desc:'Try experimental features', icon:'🧪', default:false },
]

export default function SwitchGroup({ settings = SETTINGS }) {
  const [values, setValues] = useState(Object.fromEntries(settings.map(s => [s.id, s.default])))
  const toggle = (id) => setValues(v => ({ ...v, [id]: !v[id] }))
  return (
    <div style={{ background:'#fff', borderRadius:'16px', overflow:'hidden', boxShadow:'0 2px 16px rgba(0,0,0,0.06)', maxWidth:'400px' }}>
      {settings.map((s, i) => (
        <div key={s.id} style={{
          display:'flex', alignItems:'center', gap:'14px', padding:'16px 18px',
          borderBottom:i<settings.length-1?'1px solid #f1f5f9':'none',
        }}>
          <div style={{ fontSize:'22px', width:'36px', textAlign:'center' }}>{s.icon}</div>
          <div style={{ flex:1 }}>
            <div style={{ fontWeight:600, fontSize:'14px', color:'#1e293b' }}>{s.label}</div>
            <div style={{ fontSize:'12px', color:'#94a3b8', marginTop:'2px' }}>{s.desc}</div>
          </div>
          <div onClick={()=>toggle(s.id)} style={{
            width:'44px', height:'24px', borderRadius:'12px', cursor:'pointer',
            background:values[s.id]?'#6d28d9':'#e2e8f0', position:'relative', transition:'background 0.3s', flexShrink:0,
          }}>
            <div style={{
              position:'absolute', top:'3px', left:values[s.id]?'23px':'3px',
              width:'18px', height:'18px', borderRadius:'50%', background:'#fff',
              transition:'left 0.25s', boxShadow:'0 1px 4px rgba(0,0,0,0.2)',
            }} />
          </div>
        </div>
      ))}
    </div>
  )
}

Component info

CategoryForms

Frameworkreact

TierFREE

Copies0

About

Group of toggle switches for settings panel with icons

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'

export default function ToggleSwitch({ label = 'Enable feature', defaultOn = false, disabled = false }) {
  const [on, setOn] = useState(defaultOn)
  return (
    <label style={{
      display: 'inline-f

ToggleSwitch

Forms