Radio

RadioGroup + RadioItem let users pick exactly one option from a set. Built on Radix: arrow keys move the selection, only one item is selectable at a time, and disabled items are skipped during keyboard navigation. A radio is always rendered inside a group.

Installation

pnpm add @infinitibit_gmbh/ui @infinitibit_gmbh/theme-default

Usage

import '@infinitibit_gmbh/theme-default/theme.css';
import '@infinitibit_gmbh/ui/styles.css';

import { RadioGroup, RadioItem } from '@infinitibit_gmbh/ui';

export function Example() {
  return (
    <RadioGroup aria-label="Plan" defaultValue="pro">
      <RadioItem value="free" label="Free" />
      <RadioItem value="pro" label="Pro" />
      <RadioItem value="team" label="Team" />
    </RadioGroup>
  );
}

Orientation

orientation="horizontal" lays the items out in a wrapping row (default is vertical). Arrow-key navigation follows the orientation.

States

Each RadioItem supports disabled and error. The error ring uses the critical ramp. A selected disabled item ("active-disabled") fills the circle in muted grey.

API

RadioGroup

Prop	Type	Default	Description
value	string	—	Controlled selected value
defaultValue	string	—	Initial value (uncontrolled)
onValueChange	(value: string) => void	—	Called when the selection changes
orientation	'horizontal' | 'vertical'	'vertical'	Layout + arrow-key direction
disabled	boolean	—	Disables the whole group

Renders role="radiogroup"; pass aria-label to name it. All other Radix RadioGroup.Root props are forwarded.

RadioItem

Prop	Type	Default	Description
value	string	—	The item's value (required)
label	ReactNode	—	Optional inline label (htmlFor)
disabled	boolean	—	Skips the item in keyboard nav
error	boolean	—	Critical-ramp ring + aria-invalid

Accessibility

• RadioGroup is role="radiogroup"; each item is role="radio" with aria-checked.
• Tab enters the group; arrow keys move focus between items (disabled items are skipped); Space selects the focused item. Focus ring uses :focus-visible.
• Clicking a label selects its item (htmlFor association).