Docs
Checkbox
Checkbox
A control that allows the user to toggle between checked and not checked.
import {
Checkbox,
CheckboxControl,
CheckboxLabel,
} from "@repo/tailwindcss/default/checkbox";
const CheckboxDemo = () => {
return (
<Checkbox class="flex items-center space-x-2">
<CheckboxControl />
<CheckboxLabel class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
Accept terms and conditions
</CheckboxLabel>
</Checkbox>
);
};
export default CheckboxDemo;import {
Checkbox,
CheckboxControl,
CheckboxLabel,
} from "@repo/tailwindcss/solid/checkbox";
const CheckboxDemo = () => {
return (
<Checkbox class="flex items-center space-x-2">
<CheckboxControl />
<CheckboxLabel class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
Accept terms and conditions
</CheckboxLabel>
</Checkbox>
);
};
export default CheckboxDemo;Installation
npx shadcn-solid@latest add checkboxInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Usage
import { Checkbox } from "@/components/ui/checkbox";<Checkbox />Examples
With text
import {
Checkbox,
CheckboxControl,
CheckboxDescription,
CheckboxLabel,
} from "@repo/tailwindcss/default/checkbox";
const CheckboxWithTextDemo = () => {
return (
<Checkbox class="flex items-start space-x-2">
<CheckboxControl />
<div class="grid gap-1.5 leading-none">
<CheckboxLabel class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
Accept terms and conditions
</CheckboxLabel>
<CheckboxDescription class="text-sm text-muted-foreground">
You agree to our Terms of Service and Privacy Policy.
</CheckboxDescription>
</div>
</Checkbox>
);
};
export default CheckboxWithTextDemo;import {
Checkbox,
CheckboxControl,
CheckboxDescription,
CheckboxLabel,
} from "@repo/tailwindcss/solid/checkbox";
const CheckboxWithTextDemo = () => {
return (
<Checkbox class="flex items-start space-x-2">
<CheckboxControl />
<div class="grid gap-1.5 leading-none">
<CheckboxLabel class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
Accept terms and conditions
</CheckboxLabel>
<CheckboxDescription class="text-sm text-muted-foreground">
You agree to our Terms of Service and Privacy Policy.
</CheckboxDescription>
</div>
</Checkbox>
);
};
export default CheckboxWithTextDemo;Disabled
import {
Checkbox,
CheckboxControl,
CheckboxLabel,
} from "@repo/tailwindcss/default/checkbox";
const CheckboxDisabledDemo = () => {
return (
<Checkbox class="flex items-center space-x-2" disabled>
<CheckboxControl />
<CheckboxLabel class="data-[disabled]:(cursor-not-allowed opacity-70) text-sm font-medium leading-none">
Accept terms and conditions
</CheckboxLabel>
</Checkbox>
);
};
export default CheckboxDisabledDemo;import {
Checkbox,
CheckboxControl,
CheckboxLabel,
} from "@repo/tailwindcss/solid/checkbox";
const CheckboxDisabledDemo = () => {
return (
<Checkbox class="flex items-center space-x-2" disabled>
<CheckboxControl />
<CheckboxLabel class="data-[disabled]:(cursor-not-allowed opacity-70) text-sm font-medium leading-none">
Accept terms and conditions
</CheckboxLabel>
</Checkbox>
);
};
export default CheckboxDisabledDemo;