Checkbox
Content selection and state toggles
Anatomy
import { Checkbox } from "@lualtek/react-components";
export default () => {
return <Checkbox label="Label 1" />;
};
API Reference
export type CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
/**
* Set disabled state. The component is not interactive and grayed out.
*/
disabled?: boolean;
/**
* Set the indeterminate state. This state is used to indicate that the checkbox is partially checked.
* Is used when a subset of the options are selected but not all of them.
*/
indeterminate?: boolean;
/**
* Set the size of the toggle.
* @default 'regular'
*/
dimension?: "regular" | "small";
/**
* Callback function to be called when is toggled.
* A parameter `ChangeEvent<HTMLInputElement>` is passed with the event details
*/
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
/**
* Assign a label to the input. If passed an ID is automatically generated and used internally
*/
label?: ReactNode;
/**
* Set the position of the label relative to the checkbox.
* @default 'end'
*/
labelPosition?: "start" | "end";
};