StarRating

starrating-1779393692978.tsx

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

export default function StarRating({ max = 5, defaultValue = 0, onChange }) {
  const [rating, setRating] = useState(defaultValue)
  const [hover, setHover] = useState(0)
  const current = hover || rating
  return (
    <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
      {Array.from({ length: max }).map((_, i) => (
        <button
          key={i}
          onMouseEnter={() => setHover(i + 1)}
          onMouseLeave={() => setHover(0)}
          onClick={() => { setRating(i + 1); onChange?.(i + 1) }}
          style={{
            background: 'none', border: 'none', cursor: 'pointer', padding: '2px',
            fontSize: '24px', color: i < current ? '#f59e0b' : '#e2e8f0',
            transition: 'color 0.15s, transform 0.1s',
            transform: i < current ? 'scale(1.15)' : 'scale(1)',
          }}
        >★</button>
      ))}
      <span style={{ marginLeft: '8px', fontSize: '13px', color: '#64748b' }}>
        {rating > 0 ? rating + '/' + max : 'Rate'}
      </span>
    </div>
  )
}

Component info

CategoryForms

Frameworkreact

TierFREE

Copies0

About

Interactive star rating with hover preview and half-star 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'

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

ToggleSwitch

Forms