# RadioGroup

Group of radio buttons for selecting a single option

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
import { Label, RadioGroup, RadioGroupItem } from "@databricks/appkit-ui/react"

export default function RadioGroupExample() {
  return (
    <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>
  )
}

```

## RadioGroup[​](#radiogroup-1 "Direct link to RadioGroup")

Group of radio buttons for selecting a single option

**Source:** [`packages/appkit-ui/src/react/ui/radio-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/radio-group.tsx)

### Props[​](#props "Direct link to Props")

| Prop            | Type                        | Required | Default | Description |
| --------------- | --------------------------- | -------- | ------- | ----------- |
| `name`          | `string`                    |          | -       | -           |
| `required`      | `boolean`                   |          | -       | -           |
| `disabled`      | `boolean`                   |          | -       | -           |
| `dir`           | `enum`                      |          | -       | -           |
| `orientation`   | `enum`                      |          | -       | -           |
| `loop`          | `boolean`                   |          | -       | -           |
| `defaultValue`  | `string`                    |          | -       | -           |
| `value`         | `string \| null`            |          | -       | -           |
| `onValueChange` | `((value: string) => void)` |          | -       | -           |
| `asChild`       | `boolean`                   |          | -       | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { RadioGroup } from '@databricks/appkit-ui';

<RadioGroup /* props */ />

```

## RadioGroupItem[​](#radiogroupitem "Direct link to RadioGroupItem")

**Source:** [`packages/appkit-ui/src/react/ui/radio-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/radio-group.tsx)

### Props[​](#props-1 "Direct link to Props")

| Prop       | Type             | Required | Default | Description |
| ---------- | ---------------- | -------- | ------- | ----------- |
| `value`    | `string \| null` |          | -       | -           |
| `asChild`  | `boolean`        |          | -       | -           |
| `checked`  | `boolean`        |          | -       | -           |
| `required` | `boolean`        |          | -       | -           |

### Usage[​](#usage-1 "Direct link to Usage")

```tsx
import { RadioGroupItem } from '@databricks/appkit-ui';

<RadioGroupItem /* props */ />

```