@ark-ui/vue/dist/components/field/use-field.d.ts

A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.

import { HTMLAttributes, MaybeRef, ComputedRef, Ref } from 'vue';
import { ElementIds } from './field.types';
export interface UseFieldProps {
    /**
     * The id of the field.
     */
    id?: string;
    /**
     * The ids of the field parts.
     */
    ids?: ElementIds;
    /**
     * Indicates whether the field is required.
     */
    required?: boolean;
    /**
     * Indicates whether the field is disabled.
     */
    disabled?: boolean;
    /**
     * Indicates whether the field is invalid.
     */
    invalid?: boolean;
    /**
     * Indicates whether the field is read-only.
     */
    readOnly?: boolean;
}
export type UseFieldReturn = ReturnType<typeof useField>;
export declare const useField: (props?: MaybeRef<UseFieldProps>) => ComputedRef<{
    ariaDescribedby: string | undefined;
    ids: {
        control: string;
        label: string;
        errorText: string;
        helperText: string;
    };
    refs: {
        rootRef: Ref<null, null>;
    };
    disabled: boolean | undefined;
    invalid: boolean | undefined;
    readOnly: boolean | undefined;
    required: boolean | undefined;
    getLabelProps: () => {
        id: string;
        'data-disabled': boolean | "false" | "true";
        'data-invalid': boolean | "false" | "true";
        'data-readonly': boolean | "false" | "true";
        'data-required': boolean | "false" | "true";
        htmlFor: string;
        "data-scope": string;
        "data-part": string;
    };
    getRootProps: () => {
        id: string;
        role: string;
        'data-disabled': boolean | "false" | "true";
        'data-invalid': boolean | "false" | "true";
        'data-readonly': boolean | "false" | "true";
        "data-scope": string;
        "data-part": string;
    };
    getInputProps: () => {
        "data-scope": string;
        "data-part": string;
        'aria-describedby': string | undefined;
        'aria-invalid': "true" | undefined;
        'data-invalid': boolean | "false" | "true";
        'data-required': boolean | "false" | "true";
        'data-readonly': boolean | "false" | "true";
        id: string;
        required: boolean | undefined;
        disabled: boolean | undefined;
        readOnly: boolean | undefined;
    };
    getTextareaProps: () => {
        "data-scope": string;
        "data-part": string;
        'aria-describedby': string | undefined;
        'aria-invalid': "true" | undefined;
        'data-invalid': boolean | "false" | "true";
        'data-required': boolean | "false" | "true";
        'data-readonly': boolean | "false" | "true";
        id: string;
        required: boolean | undefined;
        disabled: boolean | undefined;
        readOnly: boolean | undefined;
    };
    getSelectProps: () => {
        "data-scope": string;
        "data-part": string;
        'aria-describedby': string | undefined;
        'aria-invalid': "true" | undefined;
        'data-invalid': boolean | "false" | "true";
        'data-required': boolean | "false" | "true";
        'data-readonly': boolean | "false" | "true";
        id: string;
        required: boolean | undefined;
        disabled: boolean | undefined;
        readOnly: boolean | undefined;
    };
    getHelperTextProps: () => {
        'data-disabled': boolean | "false" | "true";
        "data-scope": string;
        "data-part": string;
        id: string;
    };
    getErrorTextProps: () => HTMLAttributes;
    getRequiredIndicatorProps: () => HTMLAttributes;
}>;