Radio Group

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/radio-group

UsageCopy Anchor Link

Wrap each Radio in a Label, and give the group a name with aria-label or a legend. Tab moves focus into the group and arrow keys change the selection.

import { Label } from "@/components/ui/label";
import { Radio, RadioGroup } from "@/components/ui/radio-group";

<RadioGroup aria-label="Framework" defaultValue="next">
  <Label>
    <Radio value="next" /> Next.js
  </Label>
  <Label>
    <Radio value="vite" /> Vite
  </Label>
</RadioGroup>;

Radio is also exported as RadioGroupItem.

With descriptionCopy Anchor Link

CardCopy Anchor Link

With a legendCopy Anchor Link

Render a Field as a Fieldset to give the group a visible legend. The field's name is used when the form is submitted.

API referenceCopy Anchor Link

RadioGroup and Radio wrap Base UI Radio Group and Base UI Radio.Root, and accept all their props. Columbus adds a vertical layout and the indicator.

RadioGroupCopy Anchor Link

RadioCopy Anchor Link