Hewn
Components

Components

RadioGroup

Mutually exclusive choice set with animated selection indicator.

newfree

Install

@hewnui/ui · hewnui

Terminal
npm install @hewnui/ui
Terminal
pnpm add @hewnui/ui
Terminal
yarn add @hewnui/ui
Terminal
bun add @hewnui/ui
Terminal
npx hewnui@latest add radio-group

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

TSX
import { Radio, RadioGroup } from "@hewnui/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

API reference

Props for RadioGroup from @hewnui/ui/radio-group. Generated from component types — not hand-written.

Prop

Type

CheckboxGroup

Labeled multi-select checkbox set with shared validation messaging.

Switch

Immediate on/off control for preferences and modes.

On this page

UsageOrientationStatesAccessibility