RadioGroup

<RadioGroup defaultValue="recents">
  {["Recents", "Home", "Applications", "Desktop"].map((item) => {
    const id = item.toLowerCase();
    return (
      <label key={id} className="flex items-center gap-2">
        <RadioGroupItem value={id} id={id} />
        <Label htmlFor={id} weight="normal">{item}</Label>
      </label>
    );
  })}
</RadioGroup>

<RadioGroup defaultValue="delete">
  <label className="flex items-center gap-2">
    <RadioGroupItem value="archive" tone="destructive" id="archive" />
    <Label htmlFor="archive" weight="normal">Archive for 30 days</Label>
  </label>
  <label className="flex items-center gap-2">
    <RadioGroupItem value="delete" tone="destructive" id="delete" />
    <Label htmlFor="delete" weight="normal">Delete immediately</Label>
  </label>
</RadioGroup>

<RadioGroup defaultValue="one" disabled>
  <label className="flex items-center gap-2">
    <RadioGroupItem value="one" id="one" />
    <Label htmlFor="one" weight="normal">Option one</Label>
  </label>
  <label className="flex items-center gap-2">
    <RadioGroupItem value="two" id="two" />
    <Label htmlFor="two" weight="normal">Option two</Label>
  </label>
</RadioGroup>

<>
  <RadioGroupItem size="md" defaultChecked value="m" />
  <RadioGroupItem size="lg" defaultChecked value="l" />
</>