Radio Group

Installation#

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/radio-group

Anatomy#

RadioGroup
└── RadioGroupItem

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.

States#

Invalid#

Use the invalid prop on RadioGroup to indicate an invalid state.

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.

RadioGroupItem#

Single radio option. Use value for selection.

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