# Radio Group

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<RadioGroup> <div class="flex items-center gap-2"> <RadioGroupItem name="plan" value="free" checked id="free" /> <Label for="free">{"Free"}</Label> </div> <div class="flex items-center gap-2"> <RadioGroupItem name="plan" value="pro" id="pro" /> <Label for="pro">{"Pro"}</Label> </div> </RadioGroup>
</div>

```astro
---
---

<RadioGroup>
  <div class="flex items-center gap-2">
    <RadioGroupItem name="plan" value="free" checked id="free" />
    <Label for="free">Free</Label>
  </div>
  <div class="flex items-center gap-2">
    <RadioGroupItem name="plan" value="pro" id="pro" />
    <Label for="pro">Pro</Label>
  </div>
</RadioGroup>
```

## Installation

<DocsTabs syncKey="pkg">
  <DocsTabItem label="bun">
  ```bash
  bunx bejamas add radio-group
  ```
  </DocsTabItem>
  <DocsTabItem label="npm">
  ```bash
  npx bejamas add radio-group
  ```
  </DocsTabItem>
  <DocsTabItem label="pnpm">
  ```bash
  pnpm dlx bejamas add radio-group
  ```
  </DocsTabItem>
  <DocsTabItem label="yarn">
  ```bash
  yarn dlx bejamas add radio-group
  ```
  </DocsTabItem>
</DocsTabs>

## Usage

```astro nocollapse
---
---

<RadioGroup>
  <div class="flex items-center gap-2">
    <RadioGroupItem name="plan" value="free" id="free" checked />
    <Label for="free">Free</Label>
  </div>
</RadioGroup>
```

## Props

| Prop | Type | Default |
|---|---|---|
| <code>class</code> | `string` | `""` |
| <code>"aria-label"</code> | `string` |  |
| <code>"aria-labelledby"</code> | `string` |  |