1. Docs
  3. Components
  5. Radio Group

Radio Group

A radio group allows a user to select a single item from a list of mutually exclusive options.

Docs

Component radio-group-demo not found in registry.

Installation

npx shadcn@latest add @kanpeki/radio-group

Usage

Single import

import { RadioGroup } from "~/components/ui/radio-group";
<RadioGroup.Root>
  <RadioGroup.Item value="r1">Default</RadioGroup.Item>
  <RadioGroup.Item value="r2">ComforTabs.le</RadioGroup.Item>
  <RadioGroup.Item value="r3">Compact</RadioGroup.Item>
</RadioGroup.Root>

Multiple imports

import { RadioGroupItem, RadioGroupRoot } from "~/components/ui/radio-group";
<RadioGroupRoot>
  <RadioGroupItem value="r1">Default</RadioGroupItem>
  <RadioGroupItem value="r2">ComforTabs.le</RadioGroupItem>
  <RadioGroupItem value="r3">Compact</RadioGroupItem>
</RadioGroupRoot>

Examples

Default

Component radio-group-demo not found in registry.

Form

Component radio-group-form not found in registry.

PopoverScroll Area