Command Palette

Search for a command to run...

Docs
Emoji Radio Group

Emoji Radio Group

A compact radio group with emoji-based options for quick visual feedback selection

Loading...

Installation

Usage

import { RadioGroup, EmojiRadio } from "@/components/ruixen/emoji-radio-group";
 
export default function App() {
  return (
    <div className="space-y-4">
      <h2 className="text-lg font-semibold">How was your experience?</h2>
 
      <RadioGroup defaultValue="happy">
        <EmojiRadio value="angry" emoji="😡" label="Angry" />
        <EmojiRadio value="neutral" emoji="😐" label="Neutral" />
        <EmojiRadio value="happy" emoji="😊" label="Happy" />
        <EmojiRadio value="love" emoji="😍" label="Loved it" />
      </RadioGroup>
    </div>
  );
}

Props

RadioGroup Props

PropTypeDefaultDescription
classNamestring-Additional CSS classes
defaultValuestring-Default selected value
valuestring-Controlled selected value
onValueChange(value: string) => void-Callback when value changes

EmojiRadio Props

PropTypeDefaultDescription
valuestring-Unique value for this option
emojistring-Emoji character to display
labelstring-Text label below emoji
classNamestring-Additional CSS classes

Features

  • Compact Design: Small, efficient radio buttons
  • Emoji Support: Universal visual communication
  • Hover Animation: Scale effect on hover
  • Selection Feedback: Border and background changes
  • Flexible Layout: Horizontal arrangement by default
  • Accessibility: Proper ARIA labels and keyboard support

Common Emoji Sets

Satisfaction Rating

<EmojiRadio value="very-sad" emoji="😢" label="Very Sad" />
<EmojiRadio value="sad" emoji="😞" label="Sad" />
<EmojiRadio value="neutral" emoji="😐" label="Neutral" />
<EmojiRadio value="happy" emoji="😊" label="Happy" />
<EmojiRadio value="very-happy" emoji="😍" label="Very Happy" />

Difficulty Level

<EmojiRadio value="easy" emoji="😌" label="Easy" />
<EmojiRadio value="medium" emoji="🤔" label="Medium" />
<EmojiRadio value="hard" emoji="😰" label="Hard" />
<EmojiRadio value="expert" emoji="🤯" label="Expert" />

Quality Rating

<EmojiRadio value="poor" emoji="👎" label="Poor" />
<EmojiRadio value="okay" emoji="👌" label="Okay" />
<EmojiRadio value="good" emoji="👍" label="Good" />
<EmojiRadio value="excellent" emoji="🔥" label="Excellent" />

Use Cases

  • Feedback Forms: Quick satisfaction surveys
  • Rating Systems: Product or service ratings
  • Mood Tracking: Daily mood selection
  • User Experience: App interaction feedback
  • Quick Polls: Simple opinion collection