Radio

import { RadioGroup, Radio } from "@craftdotui/baseui/components/radio";

<RadioGroup>
  <div className="flex items-center gap-2">
    <Radio value="option1" />
    <label>Option 1</label>
  </div>
  <div className="flex items-center gap-2">
    <Radio value="option2" />
    <label>Option 2</label>
  </div>
  <div className="flex items-center gap-2">
    <Radio value="option3" />
    <label>Option 3</label>
  </div>
</RadioGroup>

<RadioGroup defaultValue="option1">
  <div className="flex items-center gap-2">
    <Radio id="opt1" value="option1" />
    <label htmlFor="opt1">Option 1</label>
  </div>
  <div className="flex items-center gap-2">
    <Radio id="opt2" value="option2" />
    <label htmlFor="opt2">Option 2</label>
  </div>
</RadioGroup>

const [value, setValue] = useState('option1');

<RadioGroup value={value} onValueChange={setValue}>
  <div className="flex items-center gap-2">
    <Radio value="option1" />
    <label>Option 1</label>
  </div>
  <div className="flex items-center gap-2">
    <Radio value="option2" />
    <label>Option 2</label>
  </div>
</RadioGroup>

<RadioGroup>
  <div className="flex items-center gap-2">
    <Radio value="option1" />
    <label>Enabled</label>
  </div>
  <div className="flex items-center gap-2">
    <Radio value="option2" disabled />
    <label>Disabled</label>
  </div>
</RadioGroup>