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
Prop | Type | Default | Description |
---|---|---|---|
className | string | - | Additional CSS classes |
defaultValue | string | - | Default selected value |
value | string | - | Controlled selected value |
onValueChange | (value: string) => void | - | Callback when value changes |
EmojiRadio Props
Prop | Type | Default | Description |
---|---|---|---|
value | string | - | Unique value for this option |
emoji | string | - | Emoji character to display |
label | string | - | Text label below emoji |
className | string | - | 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