> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# RadioGroup

> A set of Radio items where exactly one can be selected, controlled or uncontrolled.

```tsx theme={null}
import { RadioGroup } from "@fanvue/ui";
import type { RadioGroupProps } from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-radiogroup--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="RadioGroup — Default" />
</Frame>

```tsx theme={null}
import { RadioGroup } from "@fanvue/ui";

<RadioGroup defaultValue="option1" />
```

## Disabled

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-radiogroup--disabled&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="RadioGroup — Disabled" />
</Frame>

```tsx theme={null}
import { Radio, RadioGroup } from "@fanvue/ui";

<RadioGroup
  disabled
  defaultValue="option1"
  aria-label="Disabled options"
  className="flex flex-col gap-4"
>
  <Radio label="Option 1" value="option1" />
  <Radio label="Option 2" value="option2" />
  <Radio label="Option 3" value="option3" />
</RadioGroup>
```

## Small

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-radiogroup--small&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="RadioGroup — Small" />
</Frame>

```tsx theme={null}
import { Radio, RadioGroup } from "@fanvue/ui";

<RadioGroup
  defaultValue="option1"
  aria-label="Small options"
  className="flex flex-col gap-4"
>
  <Radio size="small" label="Option 1" value="option1" />
  <Radio size="small" label="Option 2" value="option2" />
  <Radio size="small" label="Option 3" value="option3" />
</RadioGroup>
```

## Props

## RadioGroup

Groups `Radio` items into a single controlled or uncontrolled selection. Built on Radix UI `RadioGroup.Root`.

<ParamField path="asChild" type="boolean" />

## Exported types

Also exported from `@fanvue/ui`: `RadioGroupProps`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)