> ## 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.

# Radio

> A single radio option within a `RadioGroup`.

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

## Examples

## Default

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

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

<Radio label="Option" value="option" />
```

## Disabled

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

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

<Radio label="Disabled" value="disabled" disabled />
```

## Small

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

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

<Radio size="small" label="Option" value="option" />
```

## Uncontrolled

RadioGroup uses `defaultValue`. Selection is managed internally (e.g. no React state).

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

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

<RadioGroup defaultValue="b">
  <Radio label="Option A" value="a" />
  <Radio label="Option B" value="b" />
  <Radio label="Option C" value="c" />
</RadioGroup>
```

## Trailing

`layout="trailing"` pushes the radio button to the far end of the row — ideal for list rows where the label is the primary element.

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

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

<Radio
  layout="trailing"
  label="Radio Title"
  helperText="Helper"
  value="trailing"
/>
```

## Props

## Radio

A single radio option within a `RadioGroup`. Supports leading or trailing button placement, an optional avatar, a label, and helper text.

<ParamField path="avatar" type="ReactNode">
  Optional avatar shown alongside the label, for options that represent a person or account. Pass an `Avatar` sized to `32`.
</ParamField>

<ParamField path="helperText" type="string">
  Descriptive text displayed below the label.
</ParamField>

<ParamField path="label" type="string">
  Label text displayed next to the radio button.
</ParamField>

<ParamField path="layout" type="&#x22;trailing&#x22; | &#x22;leading&#x22;" default="leading">
  Placement of the radio button. `"leading"` renders it before the label; `"trailing"` pushes it to the far end of the row (for list rows).
</ParamField>

<ParamField path="size" type="&#x22;small&#x22; | &#x22;default&#x22;" default="default">
  Size variant controlling label and helper text typography.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `RadioLayout`, `RadioProps`.

***

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