RadioGroup

radiogroup-1779393692962.tsx

'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: 'Unlimited everything' },
]

export default function RadioGroup({ options = OPTIONS }) {
  const [selected, setSelected] = useState('pro')
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
      {options.map(opt => (
        <div
          key={opt.value}
          onClick={() => setSelected(opt.value)}
          style={{
            display: 'flex', alignItems: 'center', gap: '14px',
            border: '2px solid ' + (selected === opt.value ? '#6d28d9' : '#e2e8f0'),
            borderRadius: '10px', padding: '14px 16px',
            cursor: 'pointer', transition: 'all 0.2s',
            background: selected === opt.value ? '#f5f3ff' : '#fff',
          }}
        >
          <div style={{
            width: '18px', height: '18px', borderRadius: '50%',
            border: '2px solid ' + (selected === opt.value ? '#6d28d9' : '#cbd5e1'),
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            {selected === opt.value && <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#6d28d9' }} />}
          </div>
          <div>
            <div style={{ fontWeight: 600, fontSize: '14px', color: '#1e293b' }}>{opt.label}</div>
            <div style={{ fontSize: '12px', color: '#64748b' }}>{opt.desc}</div>
          </div>
        </div>
      ))}
    </div>
  )
}

Component info

CategoryForms

Frameworkreact

TierFREE

Copies0

About

Styled radio group with card-style options and hover effects

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