docs/components/radio-group
Sections
Components
Utilities
Forms
Hooks
Copy Markdown
Allows single selection from multiple options.
PreviewCode
Default
Confortable
Compact
CLIManual
pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/radio-group
RadioGroup
└── RadioGroupItem
import {
RadioGroup,
RadioGroupItem,
} from "@/components/ui/radio-group";
<RadioGroup>
<RadioGroupItem value="item-1"></RadioGroupItem>
<RadioGroupItem value="item-2"></RadioGroupItem>
</RadioGroup>
Use the value and onValueChange props to control the radio group.
PreviewCode
Select the option comfortable
Default
Comfortable
Compact
❌
Use the invalid prop on RadioGroup to indicate an invalid state.
PreviewCode
Default
Comfortable
Compact
Use the disabled on RadioGroup to disable all the radio group items or on RadioGroupItem to disable a single item.
PreviewCode
Default
Comfortable
Compact
Default
Comfortable
Compact
Use FieldDescription to add a description to the radio group.
PreviewCode
Default
Standard spacing for most use cases.
Comfortable
More space between elements.
Compact
Minimal spacing for dense layouts.
Use FieldLabel to wrap the entire Field for a clickable card-style selection.
PreviewCode
Plus
For individuals and small teams.
Pro
For growing businesses.
Enterprise
For large teams and enterprises.
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 | - |
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.
[
Previous page
QR Code ](/docs/components/qr-code)[
Next page
Rating ](/docs/components/rating)
On This Page
InstallationAnatomyUsageControlledStatesInvalidDisabledExamplesWith DescriptionCard StyleAPI ReferenceRadioGroupRadioGroupItem