Skip to main content

Examples

Default

Disabled

Small

Uncontrolled

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

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.

Props

Radio

A single radio option within a RadioGroup. Supports leading or trailing button placement, an optional avatar, a label, and helper text.
ReactNode
Optional avatar shown alongside the label, for options that represent a person or account. Pass an Avatar sized to 32.
string
Descriptive text displayed below the label.
string
Label text displayed next to the radio button.
"trailing" | "leading"
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).
"small" | "default"
default:"default"
Size variant controlling label and helper text typography.

Exported types

Also exported from @fanvue/ui: RadioLayout, RadioProps.
Setup: Installation · Theming