Checkbox

import { Checkbox } from "@fanvue/ui";
import type { CheckboxProps, CheckboxSize } from "@fanvue/ui";

import { Checkbox } from "@fanvue/ui";

<Checkbox label="Checkbox" helperText="Helper" />

import { Checkbox } from "@fanvue/ui";

<Checkbox checked />

import { Checkbox } from "@fanvue/ui";

<Checkbox label="Accept terms and conditions" />

import { Checkbox } from "@fanvue/ui";

<div className="flex flex-col gap-6">
  <div className="flex flex-col gap-4">
    <Checkbox label="Unchecked" />
    <Checkbox label="Checked" checked />
    <Checkbox label="Indeterminate" checked="indeterminate" />
    <Checkbox label="Disabled" disabled />
    <Checkbox label="Disabled + checked" disabled checked />
    <Checkbox label="With helper text" helperText="Helper" />
  </div>
  <div className="flex flex-col gap-4">
    <Checkbox size="16" label="Compact (16px)" helperText="Dense surfaces like data tables" />
    <Checkbox size="small" label="Small text size" helperText="Smaller label and helper" />
    <Checkbox size="default" label="Default text size" helperText="Default label and helper" />
  </div>
</div>

import { Checkbox } from "@fanvue/ui";

<Checkbox disabled />