Komponents
Components

Components

RadioGroup

Mutually exclusive choice set with animated selection indicator.

newfree
pnpm add @komponents/uiCanonical TypeScript source · tree-shakeable subpaths

Compound RadioGroup and Radio built on React Aria. Use for single-select settings where options should stay visible.

Deploy targetPick where this release lands first.
Density

Usage

Snippet
import { Radio, RadioGroup } from "@komponents/ui";

<RadioGroup label="Plan" defaultValue="pro">
  <Radio value="free">Free</Radio>
  <Radio value="pro">Pro</Radio>
</RadioGroup>

Orientation

vertical (default) or horizontal.

States

  • Description helper text
  • Invalid + errorMessage
  • Disabled group or individual radios

Accessibility

  • Arrow keys move selection within the group
  • Selection indicator respects reduced motion
  • Focus ring on the active radio

CheckboxGroup

Labeled multi-select checkbox set with shared validation messaging.

Switch

Immediate on/off control for preferences and modes.

On this page

UsageOrientationStatesAccessibility