@yamada-ui/form-control/dist/form-control.d.ts

Yamada UI form control component

import * as _yamada_ui_core from '@yamada-ui/core';
import { HTMLUIProps, ThemeProps, CSSUIObject } from '@yamada-ui/core';
import * as react from 'react';
import { ReactNode, FocusEventHandler } from 'react';
import { Dict } from '@yamada-ui/utils';

interface FormControlOptions {
    /**
     * If `true`, the form control will be disabled.
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * If `true`, the form control will be invalid.
     *
     * @default false
     */
    invalid?: boolean;
    /**
     * If `true`, the form control will be disabled.
     *
     * @default false
     *
     * @deprecated Use `disabled` instead.
     */
    isDisabled?: boolean;
    /**
     * If `true`, the form control will be invalid.
     *
     * @default false
     *
     * @deprecated Use `invalid` instead.
     */
    isInvalid?: boolean;
    /**
     * If `true`, the form control will be readonly.
     *
     * @default false
     *
     * @deprecated Use `readOnly` instead.
     */
    isReadOnly?: boolean;
    /**
     * If `true`, the form control will be required.
     *
     * @default false
     *
     * @deprecated Use `required` instead.
     */
    isRequired?: boolean;
    /**
     * If `true`, the form control will be readonly.
     *
     * @default false
     */
    readOnly?: boolean;
    /**
     * If `true`, the form control will be required.
     *
     * @default false
     */
    required?: boolean;
}
interface FormControlAdditionalOptions extends LabelOptions {
    /**
     * The form control error message to use.
     */
    errorMessage?: ReactNode;
    /**
     * The form control helper message to use.
     */
    helperMessage?: ReactNode;
    /**
     * If `true`, switch between helper message and error message using isInvalid.
     *
     * @default true
     *
     * @deprecated Use `replace` instead.
     */
    isReplace?: boolean;
    /**
     * The form control label to use.
     */
    label?: ReactNode;
    /**
     * If `true`, switch between helper message and error message using isInvalid.
     *
     * @default true
     */
    replace?: boolean;
    /**
     * Props the error message component.
     */
    errorMessageProps?: ErrorMessageProps;
    /**
     * Props the label component.
     */
    helperMessageProps?: HelperMessageProps;
    /**
     * Props the label component.
     */
    labelProps?: LabelProps;
}
interface FormControlProps extends HTMLUIProps, ThemeProps<"FormControl">, FormControlOptions, FormControlAdditionalOptions {
}
interface FormControlContext {
    disabled: boolean;
    focused: boolean;
    invalid: boolean;
    readOnly: boolean;
    replace: boolean;
    required: boolean;
    onBlur: () => void;
    onFocus: () => void;
    id?: string;
    labelId?: string;
}
declare const FormControlContextProvider: react.Provider<FormControlContext | undefined>;
declare const useFormControlContext: () => FormControlContext | undefined;
interface FormControlStylesContext {
    [key: string]: CSSUIObject | undefined;
}
declare const FormControlStylesProvider: react.Provider<FormControlStylesContext | undefined>;
declare const useFormControlStyles: () => FormControlStylesContext | undefined;
/**
 * `FormControl` is a component used to group form elements with label, helper message, error message, etc.
 *
 * @see Docs https://yamada-ui.com/components/forms/form-control
 */
declare const FormControl: _yamada_ui_core.Component<"div", FormControlProps>;
interface UseFormControlOptions extends FormControlOptions {
    id?: string;
    disabled?: boolean;
    readOnly?: boolean;
    required?: boolean;
}
declare const useFormControl: <Y extends Dict = Dict<any>>({ id: idProp, disabled: disabledProp, invalid: invalidProp, isDisabled: isDisabledProp, isInvalid: isInvalidProp, isReadOnly: isReadOnlyProp, isRequired: isRequiredProp, readOnly: readOnlyProp, required: requiredProp, ...rest }: UseFormControlOptions & Y) => {
    id: string | undefined;
    disabled: boolean | undefined;
    invalid: boolean | undefined;
    /**
     * @deprecated Use `disabled` instead.
     */
    isDisabled: boolean | undefined;
    /**
     * @deprecated Use `invalid` instead.
     */
    isInvalid: boolean | undefined;
    /**
     * @deprecated Use `readOnly` instead.
     */
    isReadOnly: boolean | undefined;
    /**
     * @deprecated Use `required` instead.
     */
    isRequired: boolean | undefined;
    labelId: string | undefined;
    readOnly: boolean | undefined;
    required: boolean | undefined;
} & Omit<UseFormControlOptions & Y, "disabled" | "id" | "isRequired" | "required" | "invalid" | "isDisabled" | "isInvalid" | "isReadOnly" | "readOnly">;
interface UseFormControlProps<Y extends HTMLElement> extends FormControlOptions {
    id?: string;
    disabled?: boolean;
    readOnly?: boolean;
    required?: boolean;
    onBlur?: FocusEventHandler<Y>;
    onFocus?: FocusEventHandler<Y>;
}
declare const useFormControlProps: <Y extends HTMLElement, M extends Dict>({ id, disabled, invalid, isDisabled, isInvalid, isReadOnly, isRequired, readOnly, required, onBlur, onFocus, ...rest }: M & UseFormControlProps<Y>) => {
    _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<Y, Element>) => void;
    onFocus: (event: react.FocusEvent<Y, Element>) => void;
} & Omit<M & UseFormControlProps<Y>, "disabled" | "id" | "onFocus" | "onBlur" | "isRequired" | "required" | "invalid" | "isDisabled" | "isInvalid" | "isReadOnly" | "readOnly">;
type FormControlProperty = (typeof formControlProperties)[number];
declare const formControlProperties: readonly ["disabled", "required", "readOnly", "aria-disabled", "aria-readonly", "aria-required", "aria-invalid", "data-readonly", "onFocus", "onBlur", "_hover", "_active", "_focus", "_invalid", "_focusVisible"];
declare const getFormControlProperties: ({ omit, pick, }?: {
    omit?: FormControlProperty[];
    pick?: FormControlProperty[];
}) => ("_active" | "_focus" | "_focusVisible" | "_hover" | "_invalid" | "disabled" | "aria-disabled" | "aria-invalid" | "aria-readonly" | "aria-required" | "onFocus" | "onBlur" | "required" | "readOnly" | "data-readonly")[];
interface LabelOptions {
    /**
     * @deprecated Use `required` instead.
     */
    isRequired?: boolean;
    optionalIndicator?: ReactNode;
    required?: boolean;
    requiredIndicator?: ReactNode;
}
interface LabelProps extends HTMLUIProps<"label">, LabelOptions {
}
declare const Label: _yamada_ui_core.Component<"label", LabelProps>;
interface RequiredIndicatorProps extends HTMLUIProps<"span"> {
}
declare const RequiredIndicator: _yamada_ui_core.Component<"span", RequiredIndicatorProps>;
interface HelperMessageProps extends HTMLUIProps<"span"> {
}
declare const HelperMessage: _yamada_ui_core.Component<"span", HelperMessageProps>;
interface ErrorMessageProps extends HTMLUIProps<"span"> {
}
declare const ErrorMessage: _yamada_ui_core.Component<"span", ErrorMessageProps>;

export { ErrorMessage, type ErrorMessageProps, FormControl, FormControlContextProvider, type FormControlOptions, type FormControlProperty, type FormControlProps, FormControlStylesProvider, HelperMessage, type HelperMessageProps, Label, type LabelProps, RequiredIndicator, type RequiredIndicatorProps, type UseFormControlProps, formControlProperties, getFormControlProperties, useFormControl, useFormControlContext, useFormControlProps, useFormControlStyles };