FormControl

import { Checkbox, Radio, Toggle } from "@raydenui/ui";

<Checkbox label="I agree to the terms" />

<Checkbox label="Email notifications" description="Receive email updates about your account" />

const [checked, setChecked] = useState(false);
 
<Checkbox
  label="Subscribe to newsletter"
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
/>;

const [value, setValue] = useState("option1");
 
<div className="space-y-2">
  <Radio
    name="options"
    value="option1"
    label="Option 1"
    checked={value === "option1"}
    onChange={() => setValue("option1")}
  />
  <Radio
    name="options"
    value="option2"
    label="Option 2"
    checked={value === "option2"}
    onChange={() => setValue("option2")}
  />
  <Radio
    name="options"
    value="option3"
    label="Option 3"
    checked={value === "option3"}
    onChange={() => setValue("option3")}
  />
</div>;

<Radio
  name="plan"
  value="pro"
  label="Pro Plan"
  description="$29/month, unlimited features"
  checked={plan === "pro"}
  onChange={() => setPlan("pro")}
/>

<Toggle label="Dark mode" />

<Toggle label="Auto-save" description="Automatically save changes every 5 minutes" />

const [enabled, setEnabled] = useState(false);
 
<Toggle
  label="Notifications"
  checked={enabled}
  onChange={(e) => setEnabled(e.target.checked)}
/>;