Radio Group

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

Import

import { RadioGroup } from '@chimera-ui/components'

Usage

<form>
  <RadioGroup.Root defaultValue="comfortable">
    <div className="flex items-center space-x-2">
      <RadioGroup.Item
        id="r1"
        value="default"
      >
        <RadioGroup.Indicator className="RadioGroupIndicator" />
      </RadioGroup.Item>
      <Label.Root htmlFor="r1">
        Default
      </Label.Root>
    </div>
    <div className="flex items-center space-x-2">
      <RadioGroup.Item
        id="r2"
        value="comfortable"
      >
        <RadioGroup.Indicator className="RadioGroupIndicator" />
      </RadioGroup.Item>
      <Label.Root htmlFor="r2">
        Comfortable
      </Label.Root>
    </div>
    <div className="flex items-center space-x-2">
      <RadioGroup.Item
        id="r3"
        value="compact"
      >
        <RadioGroup.Indicator className="RadioGroupIndicator" />
      </RadioGroup.Item>
      <Label.Root htmlFor="r3">
        Compact
      </Label.Root>
    </div>
  </RadioGroup.Root>
</form>

Progress Select