@yamada-ui/checkbox/dist/use-checkbox.d.ts

Yamada UI checkbox component

import * as react from 'react';
import { FocusEventHandler, ChangeEventHandler } from 'react';
import * as _yamada_ui_form_control from '@yamada-ui/form-control';
import { FormControlOptions } from '@yamada-ui/form-control';
import { PropGetter } from '@yamada-ui/core';
import { Dict } from '@yamada-ui/utils';

interface UseCheckboxProps<Y extends number | string = string> extends FormControlOptions {
    /**
     * id assigned to input.
     */
    id?: string;
    /**
     * The HTML `name` attribute used for forms.
     */
    name?: string;
    /**
     * If `true`, the checkbox will be checked.
     *
     * @default false
     */
    checked?: boolean;
    /**
     * If `true`, the checkbox will be initially checked.
     *
     * @default false
     */
    defaultChecked?: boolean;
    /**
     * If `true`, the checkbox will be initially checked.
     *
     * @default false
     *
     * @deprecated Use `defaultChecked` instead.
     */
    defaultIsChecked?: boolean;
    /**
     * If `true`, the checkbox will be indeterminate.
     *
     * @default false
     */
    indeterminate?: boolean;
    /**
     * If `true`, the checkbox will be checked.
     *
     * @default false
     *
     * @deprecated Use `checked` instead.
     */
    isChecked?: boolean;
    /**
     * If `true`, the checkbox will be indeterminate.
     *
     * @default false
     *
     * @deprecated Use `indeterminate` instead.
     */
    isIndeterminate?: boolean;
    /**
     * If `true`, the checkbox will be selected when the Enter key is pressed.
     *
     * @default false
     */
    selectOnEnter?: boolean;
    /**
     * The tab-index property of the underlying input element.
     */
    tabIndex?: number;
    /**
     * The value to be used in the checkbox input.
     */
    value?: Y;
    /**
     * The callback invoked when the checkbox is blurred.
     */
    onBlur?: FocusEventHandler<HTMLInputElement>;
    /**
     * The callback invoked when the checked state changes.
     */
    onChange?: ChangeEventHandler<HTMLInputElement>;
    /**
     * The callback invoked when the checkbox is focused.
     */
    onFocus?: FocusEventHandler<HTMLInputElement>;
}
declare const useCheckbox: <Y extends number | string = string, M extends Dict = Dict>({ id, ...props }: M & UseCheckboxProps<Y>) => {
    active: boolean;
    checked: boolean;
    focused: boolean;
    focusVisible: boolean;
    hovered: boolean;
    indeterminate: ({
        id: string;
    } & Omit<M & UseCheckboxProps<Y>, "id"> & _yamada_ui_form_control.UseFormControlProps<HTMLElement>)["indeterminate"] | ({
        id: string;
    } & Omit<M & UseCheckboxProps<Y>, "id"> & _yamada_ui_form_control.UseFormControlProps<HTMLElement>)["isIndeterminate"] | undefined;
    /**
     * @deprecated Use `active` instead.
     */
    isActive: boolean;
    /**
     * @deprecated Use `checked` instead.
     */
    isChecked: boolean;
    /**
     * @deprecated Use `focused` instead.
     */
    isFocused: boolean;
    /**
     * @deprecated Use `focusVisible` instead.
     */
    isFocusVisible: boolean;
    /**
     * @deprecated Use `hovered` instead.
     */
    isHovered: boolean;
    /**
     * @deprecated Use `indeterminate` instead.
     */
    isIndeterminate: ({
        id: string;
    } & Omit<M & UseCheckboxProps<Y>, "id"> & _yamada_ui_form_control.UseFormControlProps<HTMLElement>)["isIndeterminate"] | undefined;
    props: Omit<Omit<{
        _active?: {} | undefined;
        _focus?: {} | undefined;
        _focusVisible?: {} | undefined;
        _hover?: {} | undefined;
        _invalid?: {} | undefined;
        id: string | undefined;
        "aria-disabled": boolean | undefined;
        "aria-invalid": boolean | undefined;
        "aria-readonly": boolean | undefined;
        "aria-required": boolean | undefined;
        "data-readonly": boolean | "false" | "true";
        disabled: boolean | undefined;
        readOnly: boolean | undefined;
        required: boolean | undefined;
        onBlur: (event: react.FocusEvent<HTMLElement, Element>) => void;
        onFocus: (event: react.FocusEvent<HTMLElement, Element>) => void;
    } & Omit<{
        id: string;
    } & Omit<M & UseCheckboxProps<Y>, "id"> & _yamada_ui_form_control.UseFormControlProps<HTMLElement>, "id" | "onFocus" | "onBlur" | "disabled" | "isDisabled" | "readOnly" | "required" | "invalid" | "isInvalid" | "isReadOnly" | "isRequired">, "defaultChecked" | "id" | "tabIndex" | "onChange" | "value" | "name" | "checked" | "defaultIsChecked" | "indeterminate" | "isChecked" | "isIndeterminate" | "selectOnEnter">, "_active" | "_focus" | "_focusVisible" | "_hover" | "_invalid" | "aria-disabled" | "aria-invalid" | "aria-readonly" | "aria-required" | "onFocus" | "onBlur" | "disabled" | "readOnly" | "required" | "data-readonly">;
    getContainerProps: PropGetter<"label", undefined>;
    getIconProps: PropGetter<"div", undefined>;
    getInputProps: PropGetter<"input", undefined>;
    getLabelProps: PropGetter<"div", undefined>;
};
type UseCheckboxReturn = ReturnType<typeof useCheckbox>;

export { type UseCheckboxProps, type UseCheckboxReturn, useCheckbox };