Trivela UI

Radio Group

A vertical stack of mutually exclusive Radio inputs, with color token support.

RadioGroup is layout only — a flex flex-col gap-2 wrapper with no selection state and no color props. The color prop below belongs to Radio. Radios sharing a name get exclusivity and arrow-key navigation from the browser, so no JavaScript is needed. Installing radio-group brings radio with it.

Usage

radio-group-demo.tsx
import { RadioGroup, Radio, Label } from 'trivela-ui';

export function Example() {
  return (
    <RadioGroup role="radiogroup" aria-label="Plan">
      <div className="flex items-center gap-2">
        <Radio name="plan" id="free" defaultChecked />
        <Label htmlFor="free">Free</Label>
      </div>
      <div className="flex items-center gap-2">
        <Radio name="plan" id="pro" />
        <Label htmlFor="pro">Pro</Label>
      </div>
    </RadioGroup>
  );
}

Examples

Basic

Radios sharing one name behave as a single group, so only one can be selected.

Colors

The color token sets the selected dot. Select each one to see it — the token only shows on the checked radio.

Every color, checked

One group per color, each pre-selected, so all seven tokens are visible at once.

With descriptions

Point aria-describedby at the hint so it is announced together with the option.

1 project, community support

Unlimited projects, email support

SSO and shared billing

Disabled

disabled is a native attribute, forwarded straight to the input.

API Reference

PropTypeDefaultDescription
color'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral''primary'Radio only — color scale for the selected dot and focus ring.
classNamestring—Merged with the generated classes via cn().
...propsInputHTMLAttributes<HTMLInputElement>—Radio only — native input attributes are forwarded. type is always 'radio'.
...props (RadioGroup)HTMLAttributes<HTMLDivElement>—RadioGroup takes className and native div attributes only.