Radio Group

PreviousNext

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Component radio-group-demo not found in registry.

Installation

pnpm add @radix-ui/react-radio-group

Usage

import * as Label from "@/registry/radix-ui/ui/label"
import * as RadioGroup from "@/registry/radix-ui/ui/radio-group"
 
export function RadioGroupExample() {
  const [value, setValue] = useState("option-1")
 
  return (
    <RadioGroup.Root value={value} onValueChange={setValue}>
      <div className="flex items-center space-x-2">
        <RadioGroup.Item value="option-1" id="option-1" />
        <Label.Root htmlFor="option-1">Option 1</Label.Root>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroup.Item value="option-2" id="option-2" />
        <Label.Root htmlFor="option-2">Option 2</Label.Root>
      </div>
    </RadioGroup.Root>
  )
}

Examples

Vertical Orientation

Component radio-group-demo not found in registry.

Disabled State

<RadioGroup.Root value="option-1" disabled>
  <div className="flex items-center space-x-2">
    <RadioGroup.Item value="option-1" id="disabled-option-1" />
    <Label.Root htmlFor="disabled-option-1">Option 1</Label.Root>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroup.Item value="option-2" id="disabled-option-2" />
    <Label.Root htmlFor="disabled-option-2">Option 2</Label.Root>
  </div>
</RadioGroup.Root>