RadioGroup

Pick exactly one option from a small, mutually exclusive set. Built on base-ui Radio — roving focus, arrow-key navigation, and the hidden form input come for free.

Compose two parts: RadioGroup (the root, owns the selected value) and one RadioGroupItem per choice. Pair each item with a Label whose htmlFor matches the item’s id so the whole row is clickable.

Default

Give the root a defaultValue to render uncontrolled — base-ui tracks the selection internally. Wrap each RadioGroupItem in a Label for a click target.

Ground (3–5 business days)Expedited (2 business days)Overnight

import { Label, RadioGroup, RadioGroupItem } from "@vesyl/ui-next";

export default function RadioGroupDefault() {
  return (
    <RadioGroup defaultValue="ground" className="max-w-sm">
      <Label htmlFor="speed-ground">
        <RadioGroupItem id="speed-ground" value="ground" />
        Ground (3–5 business days)
      </Label>
      <Label htmlFor="speed-expedited">
        <RadioGroupItem id="speed-expedited" value="expedited" />
        Expedited (2 business days)
      </Label>
      <Label htmlFor="speed-overnight">
        <RadioGroupItem id="speed-overnight" value="overnight" />
        Overnight
      </Label>
    </RadioGroup>
  );
}

Controlled

To drive the selection yourself (e.g. to feed it into a label-print request), pass value and onValueChange. The ui-next wrapper hands onValueChange the selected value directly as a string.

PDF · 4×6 (thermal)PDF · 8.5×11 (letter)ZPL (Zebra printer)PNG

Selected format: pdf-4x6

import { Label, RadioGroup, RadioGroupItem } from "@vesyl/ui-next";
import { useState } from "react";

const FORMATS = [
  { value: "pdf-4x6", label: "PDF · 4×6 (thermal)" },
  { value: "pdf-letter", label: "PDF · 8.5×11 (letter)" },
  { value: "zpl", label: "ZPL (Zebra printer)" },
  { value: "png", label: "PNG" },
];

export default function RadioGroupControlled() {
  const [format, setFormat] = useState("pdf-4x6");

  return (
    <div className="flex max-w-sm flex-col gap-4">
      <RadioGroup value={format} onValueChange={setFormat}>
        {FORMATS.map((f) => (
          <Label key={f.value} htmlFor={`fmt-${f.value}`}>
            <RadioGroupItem id={`fmt-${f.value}`} value={f.value} />
            {f.label}
          </Label>
        ))}
      </RadioGroup>
      <p className="text-sm text-muted-foreground">
        Selected format: <span className="font-medium text-foreground">{format}</span>
      </p>
    </div>
  );
}

Disabled

Set disabled on a single RadioGroupItem to take one choice out of play, or on the RadioGroup root to disable every item at once.

import { Label, RadioGroup, RadioGroupItem } from "@vesyl/ui-next";

export default function RadioGroupDisabled() {
  return (
    <div className="flex flex-col gap-8">
      <div className="flex flex-col gap-3">
        <p className="text-sm font-medium text-muted-foreground">Disabled item</p>
        <RadioGroup defaultValue="standard" className="max-w-sm">
          <Label htmlFor="ins-standard">
            <RadioGroupItem id="ins-standard" value="standard" />
            Standard coverage (up to $100)
          </Label>
          <Label htmlFor="ins-extended">
            <RadioGroupItem id="ins-extended" value="extended" />
            Extended coverage (up to $1,000)
          </Label>
          <Label htmlFor="ins-premium">
            <RadioGroupItem id="ins-premium" value="premium" disabled />
            Premium coverage (unavailable for this carrier)
          </Label>
        </RadioGroup>
      </div>

      <div className="flex flex-col gap-3">
        <p className="text-sm font-medium text-muted-foreground">Disabled group</p>
        <RadioGroup defaultValue="ups" disabled className="max-w-sm">
          <Label htmlFor="carrier-ups">
            <RadioGroupItem id="carrier-ups" value="ups" />
            UPS
          </Label>
          <Label htmlFor="carrier-fedex">
            <RadioGroupItem id="carrier-fedex" value="fedex" />
            FedEx
          </Label>
          <Label htmlFor="carrier-usps">
            <RadioGroupItem id="carrier-usps" value="usps" />
            USPS
          </Label>
        </RadioGroup>
      </div>
    </div>
  );
}

Horizontal layout

The root defaults to a vertical grid with gap-3. There is no orientation prop — lay items out in a row by overriding the wrapper with flex utilities via className.

SmallMediumLarge

import { Label, RadioGroup, RadioGroupItem } from "@vesyl/ui-next";

export default function RadioGroupHorizontal() {
  return (
    <RadioGroup defaultValue="medium" className="flex flex-wrap gap-x-6 gap-y-3">
      <Label htmlFor="box-small">
        <RadioGroupItem id="box-small" value="small" />
        Small
      </Label>
      <Label htmlFor="box-medium">
        <RadioGroupItem id="box-medium" value="medium" />
        Medium
      </Label>
      <Label htmlFor="box-large">
        <RadioGroupItem id="box-large" value="large" />
        Large
      </Label>
    </RadioGroup>
  );
}

Reference

RadioGroup

Root container. Wraps base-ui RadioGroup and applies grid w-full gap-3 to the wrapper.

Prop	Type	Default	Description
`defaultValue`	`unknown`	—	Initially selected value (uncontrolled)
`value`	`unknown`	—	Selected value (controlled)
`onValueChange`	`(value: string) => void`	—	Fires with the newly selected value
`name`	`string`	—	Identifies the field when submitted in a form
`disabled`	`boolean`	`false`	Disables every item in the group
`readOnly`	`boolean`	`false`	Prevents changing the selection while keeping it focusable
`required`	`boolean`	`false`	Requires a choice before form submission
`className`	`string`	—	Merged onto the wrapper; override `grid`/`gap` for custom layout

RadioGroupItem

One radio button. Extends base-ui Radio.Root props.

Prop	Type	Default	Description
`value`	`any`	—	The value this item selects in the group
`id`	`string`	—	Ties the item to a `Label` via `htmlFor` for a click target
`disabled`	`boolean`	`false`	Disables just this item
`className`	`string`	—	Merged onto the radio control