Components
Loading preview...
Enhanced shadcn/ui radio group
npx shadcn@latest add https://21st.dev/r/originui/radio-group"use client";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { useEffect, useId, useRef, useState } from "react";
function Component() {
const radioId = useId();
const inputId = useId();
const [selectedValue, setSelectedValue] = useState("without-expansion");
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (selectedValue === "with-expansion" && inputRef.current) {
inputRef.current.focus();
}
}, [selectedValue]);
return (
<RadioGroup className="gap-6 max-w-[400px]" value={selectedValue} onValueChange={setSelectedValue}>
<div>
<div className="flex items-start gap-2">
<RadioGroupItem
value="with-expansion"
id={`${radioId}-1`}
aria-describedby={`${radioId}-1-description`}
aria-controls={inputId}
/>
<div className="grow">
<div className="grid grow gap-2">
<Label htmlFor={`${radioId}-1`}>Radio with expansion</Label>
<p id={`${radioId}-1-description`} className="text-xs text-muted-foreground">
You can use this radio with a label and a description.
</p>
</div>
<div
role="region"
id={inputId}
aria-labelledby={`${radioId}-1`}
className="grid transition-all ease-in-out data-[state=collapsed]:grid-rows-[0fr] data-[state=expanded]:grid-rows-[1fr] data-[state=collapsed]:opacity-0 data-[state=expanded]:opacity-100"
data-state={selectedValue === "with-expansion" ? "expanded" : "collapsed"}
>
<div className="pointer-events-none -m-2 overflow-hidden p-2">
<div className="pointer-events-auto mt-3">
<Input
ref={inputRef}
type="text"
id="radio-05-additional-info"
placeholder="Enter details"
aria-label="Additional Information"
disabled={selectedValue !== "with-expansion"}
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="flex items-start gap-2">
<RadioGroupItem
value="without-expansion"
id={`${radioId}-2`}
aria-describedby={`${radioId}-2-description`}
/>
<div className="grid grow gap-2">
<Label htmlFor={`${radioId}-2`}>Radio without expansion</Label>
<p id={`${radioId}-2-description`} className="text-xs text-muted-foreground">
You can use this checkbox with a label and a description.
</p>
</div>
</div>
</RadioGroup>
);
}
export { Component };