Components
Loading preview...
Enhanced shadcn/ui radio group
npx shadcn@latest add https://21st.dev/r/originui/radio-groupimport { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { useId } from "react";
function Component() {
const id = useId();
const items = [
{ value: "1", label: "USA" },
{ value: "2", label: "UK" },
{ value: "3", label: "France" },
];
return (
<fieldset className="space-y-4 max-w-[400px]">
<legend className="text-sm font-medium leading-none text-foreground">Server location</legend>
<RadioGroup className="flex flex-wrap gap-2" defaultValue="1">
{items.map((item) => (
<div
key={`${id}-${item.value}`}
className="relative flex flex-col items-start gap-4 rounded-lg border border-input p-3 shadow-sm shadow-black/5 has-[[data-state=checked]]:border-ring"
>
<div className="flex items-center gap-2">
<RadioGroupItem
id={`${id}-${item.value}`}
value={item.value}
className="after:absolute after:inset-0"
/>
<Label htmlFor={`${id}-${item.value}`}>{item.label}</Label>
</div>
</div>
))}
</RadioGroup>
</fieldset>
);
}
export { Component };