docs / core / radio
Radio
one choice from a visible set of options. use it when every option should be seen at once; a long list wants a select.
intensity · recedesrsc · client
provenance
authored in usvalayer
core / primitivesintensity
recedes · safe anywhere, including dense surfacescomposition
settings forms, plan pickers, anywhere 2 to 5 options fit on screenorientation horizontal for short, label-only optionsnot for more than a handful of options. that is a selectdescriptions on horizontal groups, the indent only works stackeda11y
radiogroup with aria-orientation · each radio reflects aria-checked and aria-disabled · label and description bind through Fieldjest-axedependencies
@base-ui/react · class-variance-authoritylive demo · try it out
Good for trying things out.
For growing teams.
Advanced controls and support.
customize
orientationstacked or inline
sizecontrol diameter
descriptionshelper text under each label
disableLastdim and block the last option
usage
import { Radio, RadioGroup } from "@usva-ui/react/primitives/radio";
<RadioGroup name="plan" defaultValue="free">
<Radio value="free" label="Free" description="Good for trying things out." />
<Radio value="pro" label="Pro" description="For growing teams." />
<Radio value="enterprise" label="Enterprise" description="Advanced controls and support." disabled />
</RadioGroup>RadioGroup
| prop | type | default | notes |
|---|---|---|---|
| value | Value | — | controlled selected value. |
| defaultValue | Value | — | initial selected value when uncontrolled. |
| onValueChange | (value: Value, eventDetails) => void | — | fires when the selected value changes. |
| name | string | — | identifies the group in form submissions. |
| orientation | "horizontal" | "vertical" | "vertical" | layout direction, announced to assistive tech. |
Radio
| prop | type | default | notes |
|---|---|---|---|
| value | Value | — | the value this radio represents. |
| label | ReactNode | — | the field label, clickable and tied to the control. |
| description | ReactNode | — | helper text below, indented to line up under the label. |
| disabled | boolean | false | dims to 50% and blocks selection. |
| size | "sm" | "md" | "md" | control size. the hit area extends well past both. |
get it
bun add @usva-ui/reactusage
import { Radio, RadioGroup } from "@usva-ui/react/primitives/radio";
<RadioGroup name="plan" defaultValue="free">
<Radio value="free" label="Free" description="Good for trying things out." />
<Radio value="pro" label="Pro" description="For growing teams." />
</RadioGroup>