This Sentiment Radio Group component reimagines the standard radio input into a feedback-friendly, card-based design. Each option is presented as a horizontal card with an emoji, a clear title, and an optional description, making it easy for users to quickly identify and select how they feel. The active choice is emphasized with accent styling and a glowing green dot in the corner, providing instant visual confirmation. Smooth hover and focus states enhance usability, while Radix ensures accessibility and keyboard support. This approach is particularly effective for surveys, reviews, or customer satisfaction forms, where you want to capture more nuanced feedback in a way that feels intuitive, expressive, and engaging.
"use client";
import { RadioGroup, SentimentCard } from "@/components/ui/sentiment-radio-group";
function DemoPage() {
return (
<div className="max-w-md space-y-6">
<h2 className="text-lg font-semibold">How did it go?</h2>
<p className="text-sm text-muted-foreground">
Select the option that best reflects your experience.
</p>
<RadioGroup defaultValue="neutral">
<SentimentCard
value="angry"
emoji="😠"
title="Angry"
description="Frustrated or upset with the experience."
/>
<SentimentCard
value="sad"
emoji="🙁"
title="Sad"
description="Something didn’t meet expectations."
/>
<SentimentCard
value="neutral"
emoji="😐"
title="Neutral"
description="Neither good nor bad, just okay."
/>
<SentimentCard
value="happy"
emoji="🙂"
title="Happy"
description="Satisfied and had a good experience."
/>
<SentimentCard
value="laughing"
emoji="😀"
title="Delighted"
description="Loved it, exceeded expectations!"
/>
</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.