Checkbox

Checkboxes allow the user to select one or more items from a set.

📦2.02 KB

Overview

import { Checkbox } from "@camome/core/Checkbox";
export default function Default() {
return <Checkbox label="Agree to Privacy Policy" />;
}

Sizes

import { Checkbox } from "@camome/core/Checkbox";
import styles from "./styles.module.scss";
export default function Size() {
return (
<div className={styles.size__container}>
<Checkbox
label="Agree to our Privacy Policy"
value="true"
size="sm"
id="size-sm"
/>
<Checkbox
label="Agree to our Privacy Policy"
value="true"
size="md"
id="size-md"
/>
<Checkbox
label="Agree to our Privacy Policy"
value="true"
size="lg"
id="size-lg"
/>
</div>
);
}

Disabled

import { Checkbox } from "@camome/core/Checkbox";
import styles from "./styles.module.scss";
export default function Disabled() {
return (
<div className={styles.disabled__container}>
<Checkbox label="Checked" value="true" checked disabled />
<Checkbox label="Not checked" value="true" disabled />
</div>
);
}

Error

Something is wrong
import { Checkbox } from "@camome/core/Checkbox";
export default function Default() {
return (
<Checkbox label="Agree to Privacy Policy" error="Something is wrong" />
);
}