<Checkbox label="Accept terms and conditions" />Examples
Sizes
Pass the size prop to the Checkbox component to change the size of the checkbox.
<div className="flex flex-col gap-2">
<Checkbox size="sm" label="Checkbox sm" />
<Checkbox size="md" label="Checkbox md" />
<Checkbox size="lg" label="Checkbox lg" />
</div>States
Pass the disabled or invalid prop to the Checkbox component to change the visual state of the checkbox.
<div className="flex flex-col gap-2">
<Checkbox label="Disabled" disabled />
<Checkbox label="Disabled" defaultChecked disabled />
<Checkbox label="Readonly" readOnly />
<Checkbox label="Invalid" invalid />
</div>Label Position
Here's an example of how to change the label position to the left.
<Checkbox label="Accept terms and conditions" labelPlacement="start" />Composition
Here's an example of how to compose a checkbox with a field component.
<div className="flex max-w-xs flex-col items-start gap-2">
<Field label="Username">
<Input placeholder="username" />
</Field>
<Field label="Password">
<Input placeholder="password" />
</Field>
<Checkbox label="Remember me" />
<Button>Submit</Button>
</div>