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 react-aria-components

Usage

import * as Label from "@/registry/react-aria/ui/label"
import * as RadioGroup from "@/registry/react-aria/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">
          Option 1
        </RadioGroup.Item>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroup.Item value="option-2" id="option-2">
          Option 2
        </RadioGroup.Item>
      </div>
    </RadioGroup.Root>
  )
}

Examples

Component radio-group-demo not found in registry.

Disabled State

<RadioGroup.Root value="option-1" isDisabled>
  <div className="flex items-center space-x-2">
    <RadioGroup.Item value="option-1" id="disabled-option-1">
      <span className="text-muted-foreground">Option 1</span>
    </RadioGroup.Item>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroup.Item value="option-2" id="disabled-option-2">
      <span className="text-muted-foreground">Option 2</span>
    </RadioGroup.Item>
  </div>
</RadioGroup.Root>