ComponentsForms & inputs

Radio Group

Pick exactly one of a small set — post visibility, invoice type, a plan. Classic radios with descriptions, selectable cards, or a compact segmented control. One tab stop, arrow keys move and select.

Radix Radio Group components/radio-group.tsx, lib/field-context.tsx, styles/forms.csstheme · material · accent · density · font

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Field, RadioGroup } from "@vamos-ui/react";

<Field label="Visibility">
  <RadioGroup
    name="visibility"
    defaultValue="public"
    items={[
      { value: "public", label: "Public" },
      { value: "private", label: "Private" },
    ]}
  />
</Field>

Inside a Field the group is labelled by the Field label (aria-labelledby) and described by its hint or error.

Rule of thumb: a value you submit → RadioGroup (segmented if labels are short); a view you switch → ToggleGroup.

Examples

Plan cards

variant="card" with icon, description and free content (price, badge) as children of RadioGroupItem.

Prices exclude VAT. Switch or cancel any time.

Segmented

For short labels that are a form value. For view or toolbar state use ToggleGroup (see Button Group).

For larger groups, call the restaurant.

Conditional fields

Controlled value drives which fields follow — a typical checkout / invoice form.

Sizes & states

Small size, a disabled option, the Field error state and read-only.

Choose a shipping method to continue.

Locked after the order was packed.

API

RadioGroup

PropTypeDefault
value
Controlled value; null = nothing selected.
V | null—
defaultValue
Initial value (uncontrolled).
V | nullnull
onValueChange
Called when the selection changes.
(value: V) => void—
items
Shorthand; or compose RadioGroupItem children.
{ value, label, description?, icon?, disabled? }[]—
variant
Circles, selectable tiles, or a segmented control.
"default" | "card" | "segmented""default"
orientation
Layout and arrow-key axis.
"vertical" | "horizontal"vertical (segmented: horizontal)
size
16 / 18 px circles; segment height from --control-h.
"sm" | "md""md"
name
Form name (hidden input). Inherited from Field.
string—
invalid / readOnly / required / disabled
Group state; inherited from Field.
boolean—
loop
Arrow keys wrap around.
booleantrue

RadioGroupItem

PropTypeDefault
value
Required.
string—
label
Names the radio (aria-labelledby).
ReactNode—
description
Linked with aria-describedby.
ReactNode—
icon
Leading icon (card, segmented).
ReactNode—
children
Extra card content (price, badge) under the label.
ReactNode—
disabled
Skipped by arrow keys.
boolean—
controlClassName
Classes for the circle (default variant).
string—
Previous
QR code
Next
Record detail layout