docs / core / radio-group

RadioGroup

a Radio on its own is half a control. the group is what holds the value, moves focus between the options and speaks for them as one question.

intensity · recedesrsc · client

provenance

shaped from sisu-plus

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

one question, two to five options, all visible at onceorientation follows the shape of the answers: long labels stacknever a lone Radio outside a group. it has nothing to belong topast about five options this wants a Select instead

a11y

give it an aria-label or a visible label · arrow keys move between options, tab moves past the whole groupjest-axe

dependencies

Base UI radio group
live demo · try it out
customize
orientationhow the options stack
disabledlocks every option at once
usagecopy
import { Radio, RadioGroup } from "@usva-ui/react/primitives/radio";

<RadioGroup
  value={theme}
  onValueChange={setTheme}
>
  <Radio value="kajo">kajo</Radio>
  <Radio value="sisu">sisu</Radio>
  <Radio value="savi">savi</Radio>
</RadioGroup>

props

proptypedefaultnotes
valueValue—the selected option. controlled, and generic, so the value does not have to be a string.
onValueChange(value: Value) => void—fires with the newly selected value.
orientation"horizontal" | "vertical""vertical"how the options stack, and which arrow keys move between them.
disabledboolean—locks every Radio inside at once, rather than one by one.

get it

bun add @usva-ui/reactcopy
usagecopy
import { Radio, RadioGroup } from "@usva-ui/react/primitives/radio";

<RadioGroup value={theme} onValueChange={setTheme} aria-label="theme">
  <Radio value="kajo">kajo</Radio>
  <Radio value="sisu">sisu</Radio>
</RadioGroup>