Radio Group

A group of radio buttons for switching things.

Starter

Pro

Enterprise

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

export function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="plan-a" className="gap-4">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="plan-a" />
        <span>Starter</span>
      </div>

      <div className="flex items-center gap-2">
        <RadioGroupItem value="plan-b" />
        <span>Pro</span>
      </div>

      <div className="flex items-center gap-2">
        <RadioGroupItem value="plan-c" />
        <span>Enterprise</span>
      </div>
    </RadioGroup>
  )
}

Installation


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

Usage

<RadioGroup defaultValue="plan-a" className="gap-4">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="plan-a" />
    <span>Starter</span>
  </div>
 
  <div className="flex items-center gap-2">
    <RadioGroupItem value="plan-b" />
    <span>Pro</span>
  </div>
 
  <div className="flex items-center gap-2">
    <RadioGroupItem value="plan-c" />
    <span>Enterprise</span>
  </div>
</RadioGroup>

Progress Ripple Button

On This Page

Installation Usage

Support Ebon UI by giving it a star on GitHub!

A lot of work goes into maintaining and improving Ebon UI. Your stars help show your support and encourage further development.