This Emoji Radio Group component transforms a traditional survey input into a fun and engaging experience. Instead of plain numbers or circles, each option is represented by an expressive emoji with a short label, making it instantly relatable for quick feedback collection. When a user selects an option, the card highlights with accent styling and displays a glowing green dot in the corner for clear visual confirmation. Smooth hover animations and responsive sizing add a playful, interactive feel, while Radix underpinnings ensure full accessibility with keyboard navigation and ARIA compliance. This design makes it perfect for customer satisfaction surveys, in-app feedback prompts, or any scenario where you want to capture sentiment in a more human and intuitive way.
"use client";
import { RadioGroup, EmojiRadio } from "@/components/ui/emoji-radio-group";
function DemoPage() {
return (
<div className="max-w-sm space-y-6">
<h2 className="text-lg font-semibold">How was your experience?</h2>
<p className="text-sm text-muted-foreground">
Select the emoji that best describes your feeling.
</p>
<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 className="mt-4 text-xs text-center text-muted-foreground">
Minimal design • Made by{" "}
<a href="https://www.ruixen.com" target="_blank" className="underline">
ruixen.com
</a>
</div>
</div>
);
}
export default DemoPage;
Part of Ruixen UI — browse the full library on 21st.dev.