Docs
Radio Group
Radio Group
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
import {
RadioGroup,
RadioGroupItem,
RadioGroupItemControl,
RadioGroupItemLabel,
} from "@repo/tailwindcss/default/radio-group";
import { For } from "solid-js";
const RadioGroupDemo = () => {
return (
<RadioGroup defaultValue="Orange" class="grid gap-2">
<For each={["Apple", "Orange", "Watermelon"]}>
{(fruit) => (
<RadioGroupItem value={fruit} class="flex items-center gap-2">
<RadioGroupItemControl />
<RadioGroupItemLabel class="text-sm">{fruit}</RadioGroupItemLabel>
</RadioGroupItem>
)}
</For>
</RadioGroup>
);
};
export default RadioGroupDemo;import {
RadioGroup,
RadioGroupItem,
RadioGroupItemControl,
RadioGroupItemLabel,
} from "@repo/tailwindcss/solid/radio-group";
import { For } from "solid-js";
const RadioGroupDemo = () => {
return (
<RadioGroup defaultValue="Orange" class="grid gap-2">
<For each={["Apple", "Orange", "Watermelon"]}>
{(fruit) => (
<RadioGroupItem value={fruit} class="flex items-center gap-2">
<RadioGroupItemControl />
<RadioGroupItemLabel class="text-sm">{fruit}</RadioGroupItemLabel>
</RadioGroupItem>
)}
</For>
</RadioGroup>
);
};
export default RadioGroupDemo;Installation
npx shadcn-solid@latest add radio-groupInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Usage
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";<RadioGroup defaultValue="option-one">
<RadioGroupItem value="option-one" />
<RadioGroupItem value="option-two" />
</RadioGroup>