Baby Baltazar

Radio Group

A set of checkable buttons where only one can be checked.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/radio-group.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Default

With Disabled Option

Form Example

Usage

How to use this component in your code.

{/* Default */}
<RadioGroup defaultValue="option-one">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
</RadioGroup>

{/* With disabled */}
<RadioGroupItem value="disabled" disabled />