import { ChangeEvent, ComponentPropsWithoutRef, ReactElement, MouseEvent } from 'react'; import { Svg, LayoutUtilProps } from '../../../types'; import { HelperProps } from '../../../internal/components'; import { CheckboxState } from '../types'; export type { CheckboxState }; /** * Props for the Checkbox component * @extends LayoutUtilProps * @extends Omit, "onChange" | "onClick" | "indeterminate"> */ export type CheckboxProps = LayoutUtilProps & Omit, "onChange" | "onClick" | "indeterminate"> & { /** * Controlled state * @default false */ checked?: boolean; /** * Uncontrolled state * @default false */ defaultChecked?: boolean; /** * Indeterminate state of the checkbox * @accessibility Applies aria-checked="mixed" * @default false */ indeterminate?: boolean; /** * Callback when checkbox is changed */ onChange?: (e: ChangeEvent, state?: CheckboxState) => void; /** * Callback when checkbox is clicked */ onClick?: (e?: MouseEvent, state?: CheckboxState) => void; /** * label for checkbox * @accessibility This should either be a string or have text content inside for accessibility */ label?: string | ReactElement; /** * Error state for the checkbox * @accessibility Applies aria-invalid="true" * @default false */ error?: boolean; /** * Icon overrides */ icons?: { checked?: Svg; indeterminate?: Svg; unchecked?: Svg; }; description?: HelperProps["description"]; /** * When `true`, hides the checkbox for visual users. * @default false */ hideCheckbox?: boolean; /** * Additional className applied to the label wrapper span */ labelWrapperClassName?: string; }; /** * Checkbox component for selecting one or more options from a list. * * Features: * - Controlled and uncontrolled state management * - Indeterminate state for partial selections * - Customizable icons for different states * - Error state with accessibility support * - Optional helper text and descriptions * - Hide checkbox option for visual-only interactions * - Full accessibility support with ARIA attributes * - Keyboard navigation support * - Layout utility props for positioning and spacing * * @example * console.log('Checked:', state.checked)} * required * /> */ export declare const Checkbox: import('react').ForwardRefExoticComponent, HTMLInputElement>, "ref">, "onChange" | "onClick" | "indeterminate"> & { /** * Controlled state * @default false */ checked?: boolean; /** * Uncontrolled state * @default false */ defaultChecked?: boolean; /** * Indeterminate state of the checkbox * @accessibility Applies aria-checked="mixed" * @default false */ indeterminate?: boolean; /** * Callback when checkbox is changed */ onChange?: (e: ChangeEvent, state?: CheckboxState) => void; /** * Callback when checkbox is clicked */ onClick?: (e?: MouseEvent, state?: CheckboxState) => void; /** * label for checkbox * @accessibility This should either be a string or have text content inside for accessibility */ label?: string | ReactElement; /** * Error state for the checkbox * @accessibility Applies aria-invalid="true" * @default false */ error?: boolean; /** * Icon overrides */ icons?: { checked?: Svg; indeterminate?: Svg; unchecked?: Svg; }; description?: HelperProps["description"]; /** * When `true`, hides the checkbox for visual users. * @default false */ hideCheckbox?: boolean; /** * Additional className applied to the label wrapper span */ labelWrapperClassName?: string; } & import('react').RefAttributes>;