Radio group

Choose one option from a visible set.

import { RadioGroup } from "@/forma/arc/radio-group/radio-group";

Base

In FORMA

Liegt in kit/arc/radio-group und ist über @/forma/arc/radio-group/radio-group erreichbar.
Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.
Das Kit nutzt ihn als RadioGroup aus @/forma/ui/radio-group — mit shadcns API, damit Module, Blöcke und Apps unverändert bleiben; die Charakter-Achsen der Richtung liegen darüber.

When to use

Two to six mutually exclusive options that need descriptions, such as plans.
Form choices that should submit natively through name.

When not to use

Use segmented-control for short inline view options.
Use select for longer lists.
Use checkbox when several options can be on at once.

Usage

import { RadioGroup } from "@/forma/arc/radio-group/radio-group";

export function PlanPicker() {
  const [plan, setPlan] = useState("team");
  return (
    <RadioGroup
      label="Plan"
      name="plan"
      value={plan}
      onValueChange={setPlan}
      options={[
        { value: "solo", label: "Solo", description: "One seat" },
        { value: "team", label: "Team", description: "Up to 20 seats" },
      ]}
    />
  );
}

API reference

RadioGroup

A fieldset of native radios where one highlight glides to the chosen row.

Prop	Type	Default	Description
`label` (required)	`string`	–	Rendered as the fieldset legend.
`options` (required)	`{ value: string; label: string; description?: string }[]`	–	Rows in order, each with optional secondary copy.
`value` (required)	`string`	–	Selected value.
`onValueChange` (required)	`(value: string) => void`	–	Called with the chosen value.
`name`	`string`	–	Native radio name for form submission. Generated when omitted.

Keyboard interactions

Keys	Action
Arrow keys	Move the selection between options (native radio behavior).
Tab	Enters and leaves the group at the selected option.

Accessibility

Uses a fieldset and legend with native radio inputs wrapped in labels.
The highlight and dot are aria-hidden decoration.

Motion

One highlight glides to the chosen row on the morph spring while the new dot springs in and the old one shrinks away.
Reduced motion places the highlight and dot instantly; resizes never animate.

Responsive behavior

Rows stack vertically and stretch to the column, so long descriptions wrap cleanly on narrow screens.
A ResizeObserver re-places the highlight on resize without animating it.

Performance

One shared highlight moves between rows instead of a layout animation per row.

Notes for AI

Use for two to six mutually exclusive options that need descriptions. Use segmented-control for short inline choices and select for longer lists.
Always controlled: value and onValueChange are required. Pass name to submit with a form.

Also in toggles

Radio cards: Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior.
Billing toggle: A monthly and yearly switch with a savings badge and prices that roll to the new amount.
Switch: A tactile toggle for settings that take effect immediately.
Rating: A simple, accessible way to capture a numeric opinion.

Guidance for AI tools

Radio group: Choose one option from a visible set. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückFile dropzone WeiterSegmented control

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.