Components
CheckBox
The CheckBox component is used to display a checkbox.
npx @colidy/ui i checkbox
Prop | Type | Default |
---|---|---|
indeterminate | boolean | false |
checked | boolean | false |
onCheckedChange | function | null |
label | string | null |
size | smmdlg | md |
colors | slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose | default |
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"
/>
);
}