RadioGroup
Basic usage
Basic usage — see the example below.
tsx
import { RadioGroup } from "~/components/ui/base/radio-group";
<RadioGroup.Root>
<RadioGroup.Item name="plan" value="free" label="Free" />
<RadioGroup.Item name="plan" value="pro" label="Pro" />
<RadioGroup.Item name="plan" value="enterprise" label="Enterprise" />
</RadioGroup.Root>
Horizontal layout
Add class="flex-row flex-wrap gap-4" on the Root.
tsx
<RadioGroup.Root class="flex-row flex-wrap gap-4">
<RadioGroup.Item name="size" value="sm" label="Small" />
<RadioGroup.Item name="size" value="md" label="Medium" />
<RadioGroup.Item name="size" value="lg" label="Large" />
</RadioGroup.Root>
Disabled item
One of the items can be made unavailable via disabled.
tsx
<RadioGroup.Root>
<RadioGroup.Item name="tier" value="basic" label="Basic" />
<RadioGroup.Item name="tier" value="plus" label="Plus" disabled />
<RadioGroup.Item name="tier" value="premium" label="Premium" />
</RadioGroup.Root>
Metadata
Source: meta.generated.json (see npm run generate)
File base/radio-group/meta.generated.json not found or path not allowed.