Delphi Design

A radio group component for mutually exclusive selections.

Default

Options

Option 1

Option 2

Option 3

Usage

import { RadioGroup, RadioGroupItem, Label } from "@delphi/ui";

export function Example() {
  return (
    <RadioGroup defaultValue="comfortable">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="default" id="r1" />
        <Label htmlFor="r1">Default</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="comfortable" id="r2" />
        <Label htmlFor="r2">Comfortable</Label>
      </div>
    </RadioGroup>
  );
}

API Reference

Prop	Type	Default	Description
`value`	`string`	-	Controlled selected value
`defaultValue`	`string`	-	Default selected value
`onValueChange`	`(value: string) => void`	-	Callback when selection changes
`disabled`	`boolean`	`false`	Disables all radio items
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	Layout orientation

Use radio buttons for mutually exclusive choices (only one can be selected)

Always pair with labels using htmlFor and id

Pre-select a default option when one is recommended

Use 2-5 options — for more, consider a Select

Group related radios with a fieldset and legend

Use radio buttons for multi-select — use checkboxes instead

Leave all options unselected when a default makes sense

Use radio buttons for binary yes/no — use a Switch or Checkbox

Change other form values when a radio is selected