import { CommonProps, Refable } from "@trackunit/react-components";
import { MappedOmit } from "@trackunit/shared-utils";
import { InputHTMLAttributes, ReactNode } from "react";
export interface CheckboxProps extends CommonProps, MappedOmit<InputHTMLAttributes<HTMLInputElement>, "prefix">, Refable<HTMLInputElement> {
    /**
     * A string element to be displayed as a label
     */
    label?: string | ReactNode;
    /**
     * An element to display after the label
     */
    suffix?: ReactNode;
    /**
     * An boolean flag to set checkbox to checked state
     */
    checked?: boolean;
    /**
     * An boolean flag to set checkbox to disabled state
     */
    disabled?: boolean;
    /**
     * An boolean flag to set invalid mode
     * can be used for indicating errors
     */
    isInvalid?: boolean;
    /**
     * An boolean flag to set checkbox to readonly mode
     */
    readOnly?: boolean;
    /**
     * An boolean flag to set checkbox to intermediate state
     */
    indeterminate?: boolean;
    /**
     * An boolean flag to stop propagation of the click event
     */
    stopPropagation?: boolean;
}
/**
 * Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
 *
 * Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.
 *
 * ### When to use
 * Use checkboxes to allow selection in a form, for filtering, terms and conditions to indicate agreement, and bulk actions in lists or tables.
 *
 * ### When not to use
 * Do not use checkboxes if the user can only select one option from a list. Use RadioGroup instead.
 *
 * @example Basic checkbox
 * ```tsx
 * import { Checkbox } from "@trackunit/react-form-components";
 * import { useState } from "react";
 *
 * const MyForm = () => {
 *   const [accepted, setAccepted] = useState(false);
 *
 *   return (
 *     <Checkbox
 *       label="I accept the terms and conditions"
 *       checked={accepted}
 *       onChange={(e) => setAccepted(e.target.checked)}
 *     />
 *   );
 * };
 * ```
 * @example Checkbox group for multiple selections
 * ```tsx
 * import { Checkbox } from "@trackunit/react-form-components";
 * import { useState } from "react";
 *
 * const NotificationSettings = () => {
 *   const [notifications, setNotifications] = useState({
 *     email: true,
 *     sms: false,
 *     push: true,
 *   });
 *
 *   const handleChange = (key: keyof typeof notifications) => (e: React.ChangeEvent<HTMLInputElement>) => {
 *     setNotifications((prev) => ({ ...prev, [key]: e.target.checked }));
 *   };
 *
 *   return (
 *     <div className="flex flex-col gap-2">
 *       <Checkbox label="Email notifications" checked={notifications.email} onChange={handleChange("email")} />
 *       <Checkbox label="SMS notifications" checked={notifications.sms} onChange={handleChange("sms")} />
 *       <Checkbox label="Push notifications" checked={notifications.push} onChange={handleChange("push")} />
 *     </div>
 *   );
 * };
 * ```
 * @description A reference to the input element is provided as the `ref` prop.
 * @augments props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
 * @param {CheckboxProps} props - The props for the Checkbox component
 */
export declare const Checkbox: {
    ({ className, "data-testid": dataTestId, onChange, checked, disabled, isInvalid, readOnly, indeterminate, suffix, label, tabIndex, stopPropagation, ref, ...rest }: CheckboxProps): ReactNode;
    displayName: string;
};