# Radio group

Monolith Radio group component.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





Basic usage of the Monolith Radio Group.

<ComponentPreview name="radio-group-demo">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto items-center">
    <RadioGroup defaultValue="comfortable">
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="default" id="r1" />

        <Label htmlFor="r1">
          Default
        </Label>
      </div>

      <div className="flex items-center space-x-2">
        <RadioGroupItem value="comfortable" id="r2" />

        <Label htmlFor="r2">
          Comfortable
        </Label>
      </div>

      <div className="flex items-center space-x-2">
        <RadioGroupItem value="compact" id="r3" />

        <Label htmlFor="r3">
          Compact
        </Label>
      </div>
    </RadioGroup>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/radio-group.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

```tsx
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"

export function MyComponent() {
  return (
    <RadioGroup defaultValue="option-one">
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option-one" id="option-one" />
        <Label htmlFor="option-one">Option One</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option-two" id="option-two" />
        <Label htmlFor="option-two">Option Two</Label>
      </div>
    </RadioGroup>
  );
}
```

## Examples [#examples]

### Disabled [#disabled]

<ComponentPreview name="radio-group-disabled">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto items-center">
    <RadioGroup defaultValue="default">
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="default" id="r1-disabled" />

        <Label htmlFor="r1-disabled">
          Default
        </Label>
      </div>

      <div className="flex items-center space-x-2">
        <RadioGroupItem value="comfortable" id="r2-disabled" />

        <Label htmlFor="r2-disabled">
          Comfortable (Disabled Option)
        </Label>
      </div>
    </RadioGroup>
  </div>
</ComponentPreview>

### Error State [#error-state]

<ComponentPreview name="radio-group-error">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto items-center">
    <div className="grid gap-3">
      <Label className="text-semantic-danger">
        Select a plan
      </Label>

      <RadioGroup aria-invalid="true">
        <div className="flex items-center space-x-2">
          <RadioGroupItem value="basic" id="r-error-1" />

          <Label htmlFor="r-error-1">
            Basic Plan
          </Label>
        </div>

        <div className="flex items-center space-x-2">
          <RadioGroupItem value="pro" id="r-error-2" />

          <Label htmlFor="r-error-2">
            Pro Plan
          </Label>
        </div>
      </RadioGroup>

      <p className="text-sm text-semantic-danger">
        Please select a plan before continuing.
      </p>
    </div>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `RadioGroup` component uses Radix UI primitives and extends their attributes.

| Prop            | Type                      | Description                                                                               |
| --------------- | ------------------------- | ----------------------------------------------------------------------------------------- |
| `defaultValue`  | `string`                  | The value of the radio item that should be checked when initially rendered.               |
| `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.                     |
| `name`          | `string`                  | The name of the radio group, submitted with its owning form as part of a name/value pair. |