Components
Starting preview...
Enhanced shadcn/ui radio group
npx shadcn@latest add https://21st.dev/r/originui/radio-group"use client";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { RiStarFill } from "@remixicon/react";
import { useId, useState } from "react";
function Component() {
const id = useId();
const [hoverRating, setHoverRating] = useState("");
const [currentRating, setCurrentRating] = useState("");
return (
<fieldset className="space-y-4 max-w-[400px]">
<legend className="text-sm font-medium leading-none text-foreground">
Rate your experience
</legend>
<RadioGroup className="inline-flex gap-0" onValueChange={setCurrentRating}>
{["1", "2", "3", "4", "5"].map((value) => (
<label
key={value}
className="group relative cursor-pointer rounded-lg p-0.5 has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-ring/70"
onMouseEnter={() => setHoverRating(value)}
onMouseLeave={() => setHoverRating("")}
>
<RadioGroupItem id={`${id}-${value}`} value={value} className="sr-only" />
<RiStarFill
size={24}
className={`transition-all ${
(hoverRating || currentRating) >= value ? "text-amber-500" : "text-input"
} group-hover:scale-110`}
/>
<span className="sr-only">
{value} star{value === "1" ? "" : "s"}
</span>
</label>
))}
</RadioGroup>
</fieldset>
);
}
export { Component };