Components
Loading preview...
Provides single user input from a selection of options.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/radioimport { RadioGroup, useRadio } from "@/components/ui/radio";
import React, { useState } from "react";
export default function HeadlessDemo() {
const [value4, setValue4] = useState<string>("one");
const { component } = useRadio({ value: "one", disabled: false });
const { component: component2 } = useRadio({ value: "two", disabled: false });
return (
<div className="w-80">
<RadioGroup onChange={setValue4} value={value4}>
<div className="flex flex-col gap-6 font-sans text-gray-1000">
<label
style={{
display: "flex",
justifyContent: "space-between"
}}
>
<span>Option 1</span>
{component}
</label>
<label
style={{
display: "flex",
justifyContent: "space-between"
}}
>
<span>Option 2</span>
{component2}
</label>
</div>
</RadioGroup>
</div>
);
}