Radio Group

Allows single selection from multiple options.

DefaultConfortableCompact

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/radio-group.json

Usage


import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group";


<RadioGroup>
  <RadioGroupItem value="item-1">{/* label */}</RadioGroupItem>
  <RadioGroupItem value="item-2">{/* label */}</RadioGroupItem>
</RadioGroup>

Controlled

Use the value and onValueChange props to control the radio group.

Select the option comfortable

DefaultComfortableCompact

❌

State

Invalid

Use the invalid prop on <RadioGroup /> to indicate an invalid state.

DefaultComfortableCompact

Disabled

Use the disabled on <RadioGroup /> to disable all the radio group items or on <RadioGroupItem /> to disable a single item.

Examples

With Description

Use <FieldDescription /> to add a description to the radio group.

Card Style

Use <FieldLabel /> to wrap the entire <Field /> for a clickable card-style selection.

API Reference

RadioGroup

Root component. Manages single selection from options.

Prop	Type	Default
`value`	`string`	`-`
`defaultValue`	`string`	`-`
`disabled`	`boolean`	`false`
`name`	`string`	`-`
`onValueChange`	`(details: ValueChangeDetails) => void`	`-`
`className`	`string`	`-`

RadioGroupItem

Single radio option. Use value for selection.

Prop	Type	Default
`value`	`string`	`-`
`disabled`	`boolean`	`false`
`invalid`	`boolean`	`false`
`className`	`string`	`-`

For a complete list of props, see the Ark UI documentation.

On This Page

Installation Usage Controlled State Invalid Disabled Examples With Description Card Style API Reference RadioGroup RadioGroupItem