🚀 Beta mode be careful of the bugs

Radio

Displays a callout for user attention.

Preview

The Badge component is used to display important messages to users. It comes with several sub components to structure the content effectively.

Radio 15
Choose plan
$9/mo
$29/mo
$49/mo
Custom

Installation

pnpm dlx shadcn@latest add https://shadwui.com/r/radio-group.json

Usage

import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
<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>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>

Examples

01

Radio 01
Radio

02

Radio 02

03

Radio 03

04

Radio 04

You can use this card with a label and a description.

You can use this card with a label and a description.

05

Radio 05

You can use this radio with a label and a description.

You can use this checkbox with a label and a description.

06

Radio 06
Radio

07

Radio 07
Choose a color

08

Radio 08

You can use this card with a label and a description.

You can use this card with a label and a description.

09

Radio 09

You can use this card with a label and a description.

You can use this card with a label and a description.

10

Radio 10

You can use this card with a label and a description.

You can use this card with a label and a description.

more...

Radio 11
Radio 12
Radio
Radio 13
CPU Cores
Radio 14
Server location
Radio 15
Choose plan
$9/mo
$29/mo
$49/mo
Custom
Radio 16
How did it go?
Radio 17
How likely are you to recommend us?

😡 Not likely

Very Likely 😍

Radio 18
Radio
Radio 19

Options

ComponentDescriptionExample Usage
RadioGroupA container that manages a set of radio buttons, ensuring only one can be selected at a time.<RadioGroup defaultValue="option1">...</RadioGroup>
RadioGroupItemAn individual radio button within the RadioGroup.<RadioGroupItem value="option1" id="option1" />

On this page