## Examples

### Controlled


import CheckboxControlled from "./CheckboxControlled.tsx?raw"

<LiveExample src={CheckboxControlled} />

### Uncontrolled


import CheckboxUncontrolled from "./CheckboxUncontrolled.tsx?raw"

<LiveExample src={CheckboxUncontrolled} />

### Reversed


import CheckboxReversed from "./CheckboxReversed.tsx?raw"

<LiveExample src={CheckboxReversed} />

### Label wraps

You can expand the clickable area of a checkbox so that it spans wider than the checkbox label by adding the `isLabelWrapped` property. This allows users to select a checkbox by clicking the checkbox itself, the label, or the area between the checkbox and the label.


import CheckboxLabelWraps from "./CheckboxLabelWraps.tsx?raw"

<LiveExample src={CheckboxLabelWraps} />

### Disabled


import CheckboxDisabled from "./CheckboxDisabled.tsx?raw"

<LiveExample src={CheckboxDisabled} />

### Checkbox with description


import CheckboxWithDescription from "./CheckboxWithDescription.tsx?raw"

<LiveExample src={CheckboxWithDescription} />

### Checkbox with body


import CheckboxWithBody from "./CheckboxWithBody.tsx?raw"

<LiveExample src={CheckboxWithBody} />

### Checkbox with description and body


import CheckboxWithDescriptionBody from "./CheckboxWithDescriptionBody.tsx?raw"

<LiveExample src={CheckboxWithDescriptionBody} />

### Standalone input


import CheckboxStandaloneInput from "./CheckboxStandaloneInput.tsx?raw"

<LiveExample src={CheckboxStandaloneInput} />

### Required input


import CheckboxRequired from "./CheckboxRequired.tsx?raw"

<LiveExample src={CheckboxRequired} />