Aspyn

Radio Group

Single choice among mutually exclusive options.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens
import { RadioGroup, RadioGroupItem } from "@aspyn-io/kit";

Plan selection

<RadioGroup defaultValue="pro">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="starter" id="starter" />
    <Label htmlFor="starter">Starter — $29/mo</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="pro" id="pro" />
    <Label htmlFor="pro">Pro — $89/mo</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="team" id="team" />
    <Label htmlFor="team">Team — $290/mo</Label>
  </div>
</RadioGroup>

Notes

  • Arrow keys move selection within the group (Radix roving focus).
  • Controlled: value + onValueChange — values map to your API enums (snake_case).