@styleless-ui/react/Checkbox/Checkbox.d.ts

Completely unstyled, headless and accessible React UI components.

import * as React from "react";
import type { Classes, MergeElementProps } from "../typings";
type CheckboxClassesMap = Classes<"root" | "label" | "check">;
type ClassesContext = {
    /** The `checked` state of the checkbox. */
    checked: boolean;
    /** The `disabled` state of the checkbox. */
    disabled: boolean;
    /** The `indeterminated` state of the checkbox. */
    indeterminated: boolean;
    /** The `:focus-visible` of the checkbox. */
    focusedVisible: boolean;
};
interface OwnProps {
    /**
     * Map of sub-components and their correlated classNames.
     */
    classes?: ((ctx: ClassesContext) => CheckboxClassesMap) | CheckboxClassesMap;
    /**
     * The label of the checkbox.
     */
    label: string | {
        /**
         * The label to use as `aria-label` property.
         */
        screenReaderLabel: string;
    } | {
        /**
         * Identifies the element (or elements) that labels the checkbox.
         *
         * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby MDN Web Docs} for more information.
         */
        labelledBy: string;
    };
    /**
     * The value of the checkbox. Use when it is a CheckGroup's child.
     */
    value?: string;
    /**
     * If `true`, the checkbox will be focused automatically.
     * @default false
     */
    autoFocus?: boolean;
    /**
     * If `true`, the checkbox will be checked.
     * @default false
     */
    checked?: boolean;
    /**
     * The default state of `checked`. Use when the component is not controlled.
     * @default false
     */
    defaultChecked?: boolean;
    /**
     * If `true`, the checkbox will be disabled.
     * @default false
     */
    disabled?: boolean;
    /**
     * If `true`, the checkbox will appear indeterminate.
     * This does not set the native input element to indeterminate due to inconsistent behavior across browsers.
     * @default false;
     */
    indeterminated?: boolean;
    /**
     * The Callback is fired when the state changes.
     */
    onChange?: (checkedState: boolean) => void;
    /**
     * The component to be used as the check element.
     */
    checkComponent?: React.ReactElement;
    onFocus?: React.FocusEventHandler<HTMLButtonElement>;
    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
    onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;
}
export type Props = Omit<MergeElementProps<"button", OwnProps>, "defaultValue" | "className">;
declare const Checkbox: (props: Props, ref: React.Ref<HTMLButtonElement>) => JSX.Element;
export default Checkbox;