Radio Group

Preview

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

pnpm exec ui add radio-group

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

import { RadioGroup, RadioGroupItem } from '@nimjs/ui';

export function Example() {
  return (
    <RadioGroup defaultValue="basic" name="plan">
      <legend>Plan</legend>
      <label><RadioGroupItem value="basic" /> Basic</label>
      <label><RadioGroupItem value="pro" /> Pro</label>
    </RadioGroup>
  );
}

System metadata

API and states

Use value and onValueChange for controlled state, or defaultValue for native uncontrolled state. The group supports disabled, required, invalid, and orientation.

Accessibility

The fieldset and legend name the group. Each item is a native radio input, so browsers provide Tab and arrow key behavior. Label every item.