Matcha UI
← All components

Radio Group

Single-choice options in forms and settings.

Example

import { Label } from "matcha-ui";
import { RadioGroup, RadioGroupItem } from "matcha-ui";

<RadioGroup defaultValue="monthly" className="grid gap-2 max-w-xs">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="monthly" id="m" />
    <Label htmlFor="m">Monthly</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="annual" id="a" />
    <Label htmlFor="a">Annual</Label>
  </div>
</RadioGroup>