25
A set of checkable buttons where only one can be selected at a time.
npx neobrutal add radio-groupimport { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"<RadioGroup defaultValue="comfortable">
<div className="flex items-center gap-2">
<RadioGroupItem value="default" id="r1" />
<Label htmlFor="r1">Default</Label>
</div>
<div className="flex items-center gap-2">
<RadioGroupItem value="comfortable" id="r2" />
<Label htmlFor="r2">Comfortable</Label>
</div>
<div className="flex items-center gap-2">
<RadioGroupItem value="compact" id="r3" />
<Label htmlFor="r3">Compact</Label>
</div>
</RadioGroup>| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | - | The value of the radio item that should be checked by default. |
| value | string | - | The controlled value of the radio item to check. |
| onValueChange | (value: string) => void | - | Event handler called when the value changes. |
| disabled | boolean | - | When true, prevents the user from interacting with the radio group. |
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | The value given as data for the radio item when submitted in a form. |
| disabled | boolean | - | When true, prevents the user from interacting with the radio item. |
| required | boolean | - | When true, indicates that the user must check the radio item before the owning form can be submitted. |