Codeways UI
Browse components

Forms

RadioGroup

Mutually exclusive options, each with its own row.

@codeways/ui/radio-group

RadioGroup

Mutually exclusive options, each with its own row - group in a <fieldset> with a <legend>.

default
Invoice delivery
disabled option
Invoice delivery, one disabled

Usage

import { RadioGroup, RadioGroupItem } from "@codeways/ui/radio-group";
import { Label } from "@codeways/ui/label";

<fieldset>
  <legend className="sr-only">Invoice delivery</legend>
  <RadioGroup defaultValue="email" name="delivery">
    <div className="flex items-center gap-2">
      <RadioGroupItem id="delivery-email" value="email" />
      <Label htmlFor="delivery-email">Email the client</Label>
    </div>
  </RadioGroup>
</fieldset>