Installation

npx @colidy/ui i checkbox

API Reference

PropTypeDefault
indeterminate
boolean
false
checked
boolean
false
onCheckedChange
function
null
label
string
null
size
smmdlg
md
colors
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
default

Examples

Basic

A basic checkbox.

example.tsx
import { Button } from "@/colidy-ui/Button";

export default function Basic() {
    return (
        <CheckBox
			label="I agree to the terms and conditions"
		/>
    );
}

With description

A checkbox with a description.

example.tsx
import { Button } from "@/colidy-ui/Button";

export default function WithDescription() {
    return (
        <CheckBox
			label="I agree to the terms and conditions"
			description="By checking this box, you agree to the terms and conditions."
		/>
    );
}

Colors

A checkbox with a color.

example.tsx
import { Button } from "@/colidy-ui/Button";

export default function Colors() {
    return (
        colors.map(color => (
			<CheckBox
				key={color}
				label={color}
				color={color}
			/>
		))
    );
}

Sizes

A checkbox with a size.

example.tsx
import { Button } from "@/colidy-ui/Button";

export default function Sizes() {
    return (
        <CheckBox
			label="I agree to the terms and conditions"
			size="lg"
		/>
    );
}

ColidyUI © 2024