Radio

Single-select control. 2 values × 4 states.

Home deliveryPick up from ShaplaCourier hub

tsx

import * as React from "react";
import { Radio } from "@/components/ui/radio";

export default function Example() {
  const [pick, setPick] = React.useState("home");
  return (
    <div role="radiogroup" aria-label="Delivery" style={{ display: "grid", gap: 12 }}>
      <Radio name="delivery" label="Home delivery" checked={pick === "home"} onChange={() => setPick("home")} />
      <Radio name="delivery" label="Pick up from Shapla" checked={pick === "shop"} onChange={() => setPick("shop")} />
      <Radio name="delivery" label="Courier hub" checked={pick === "hub"} onChange={() => setPick("hub")} />
    </div>
  );
}

Installation

$ npx uix-ui@latest add radio

This copies the file into components/ui/radio.tsx in your project. npx shadcn@latest add @uix/radio works too.

Usage

radio.tsx

import { Radio } from "@/components/ui/radio";

<div role="radiogroup" aria-label="Payment" style={{ display: "grid", gap: 12 }}>
  <Radio name="pay" label="bKash" defaultChecked />
  <Radio name="pay" label="Cash on delivery" />
  <Radio name="pay" label="Card (coming soon)" disabled />
</div>

Examples

Default choice and disabled

bKashCash on deliveryCard (coming soon)

tsx

import { Radio } from "@/components/ui/radio";

export default function Example() {
  return (
    <div role="radiogroup" aria-label="Payment" style={{ display: "grid", gap: 12 }}>
      <Radio name="pay" label="bKash" defaultChecked />
      <Radio name="pay" label="Cash on delivery" />
      <Radio name="pay" label="Card (coming soon)" disabled />
    </div>
  );
}

Props

Prop	Type	Default	Description
`label`	`React.ReactNode`	–

Everything else is passed to the root element, so className, aria-* and event handlers work as usual.

Dependencies

Installed for you by the CLI.

class-variance-authority
clsx
tailwind-merge

lib/utils.ts

Getting started

Actions

Forms

Navigation

Feedback

Data display

Overlays

#Installation

#Usage

#Examples

#Default choice and disabled

#Props

#Dependencies