@spark-web/field/dist/declarations/src/field.d.ts

--- title: Field isExperimentalPackage: false ---

import type { DataAttributeMap } from '@spark-web/utils/internal';
import type { ReactElement, ReactNode } from 'react';
export declare type Tone = keyof typeof messageToneMap;
export declare type FieldProps = {
    /** Sets a unique identifier for the component. */
    id?: string;
    /** Sets data attributes on the component. */
    data?: DataAttributeMap;
    /** Optionally provide a utility or contextual hint, related to the field. */
    adornment?: ReactElement;
    /** Input component  */
    children: ReactNode;
    /**
     * Indicates that the field is perceivable but disabled, so it is not editable
     * or otherwise operable.
     */
    disabled?: boolean;
    /** Provide additional information that will aid user input. */
    description?: string;
    /** Concisely label the field. */
    label: string;
    /**
     * The label must always be provided for assistive technology, but you may
     * hide it from sighted users when the intent can be inferred from context.
     */
    labelVisibility?: 'hidden' | 'reserve-space' | 'visible';
    /** Provide a message, informing the user about changes in state. */
    message?: string;
    /** Additional context, typically used to indicate that the field is optional. */
    secondaryLabel?: string;
    /** Provide a tone to influence elements of the field, and its input. */
    tone?: Tone;
};
/**
 * Using a [context](https://reactjs.org/docs/context.html), the field
 * component connects the label, description, and message to the input element.
 */
export declare const Field: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLDivElement>>;
export declare function useFieldIds(id?: string): {
    descriptionId: string;
    inputId: string;
    messageId: string;
};
declare const messageToneMap: {
    readonly critical: "critical";
    readonly neutral: "muted";
    readonly positive: "positive";
};
declare type FieldMessageProps = Required<Pick<FieldProps, 'message' | 'id' | 'tone'>>;
export declare const FieldMessage: ({ message, id, tone }: FieldMessageProps) => JSX.Element;
export {};