Inputs
Checkbox

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";
};