Docs
Components
Radio Group

Radio Group

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

Docs

Preview

Code

DefaultComfortableCompact

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/radio-group

Anatomy

Single import

Multiple imports

import { Label } from "~/components/ui/label";
import { RadioGroup } from "~/components/ui/radio-group";

<RadioGroup.Root>
  <RadioGroup.Item>
    <RadioGroup.Indicator />
    <Label />
  </RadioGroup.Item>
</RadioGroup.Root>;

Examples

With Description

Preview

Code

Starter Plan

Perfect for small businesses getting started with our platform

Pro Plan

Advanced features for growing businesses with higher demands

Disabled

Preview

Code

DogCatDragon

Form

Under Construction

This component is currently being built. Check back soon for updates!

API Reference

RadioGroup.Root

Prop	Type	Default
`value`	`string`
`defaultValue`	`string`
`onChange`	`function`
`name`	`string`
`isDisabled`	`boolean`
`isReadOnly`	`boolean`
`isRequired`	`boolean`
`isInvalid`	`boolean`
`orientation`	`enum`	`"vertical"`
`children`	`ReactNode`

RadioGroup.Item

Prop	Type	Default
`value`	`string`
`isDisabled`	`boolean`
`children`	`ReactNode`

RadioGroup.Indicator

Prop	Type	Default
`className`	`string`

Popover Resizable

On This Page

Installation
Anatomy
Examples
With Description
Disabled
Form
API Reference
RadioGroup.Root
RadioGroup.Item
RadioGroup.Indicator

Contribute