@atlaskit/form/dist/types-ts4.5/messages.d.ts

A form allows people to input information.

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { type ReactNode } from 'react';
type MessageAppearance = 'default' | 'error' | 'valid';
/**
 * API for the internal `<Message />` component. This is not public API.
 */
interface InternalMessageProps {
    /**
     * The content of the message
     */
    children: ReactNode;
    /**
     * A testId prop is provided for specified elements, which is a unique string
     *  that appears as a data attribute data-testid in the rendered code,
     *  serving as a hook for automated tests
     */
    testId?: string;
    /**
     * Determines the appearance of the message.
     */
    appearance?: MessageAppearance;
    fieldId?: string;
}
/**
 * Public API of the various message components.
 */
type MessageProps = Pick<InternalMessageProps, 'children' | 'testId'>;
/**
 * __Helper message__
 *
 * A helper message tells the user what kind of input the field takes. For example, a helper message could be
 * 'Password should be more than 4 characters'
 *
 */
export declare const HelperMessage: ({ children, testId }: MessageProps) => JSX.Element;
/**
 * __Error message__
 *
 * An error message is used to tell a user that the field input is invalid. For example, an error message could be
 * 'Invalid username, needs to be more than 4 characters'.
 *
 */
export declare const ErrorMessage: ({ children, testId }: MessageProps) => JSX.Element;
/**
 * __Valid message__
 *
 * A valid message is used to tell a user that the field input is valid. For example,
 * a helper message could be 'Nice one, this username is available'.
 *
 */
export declare const ValidMessage: ({ children, testId }: MessageProps) => JSX.Element;
/**
 * __Message wrapper __
 *
 * A message wrapper is used to allow assistive technologies, like screen readers, to announce error or
 * valid messages. This must be loaded into the DOM before the
 * ErrorMessage, ValidMessage is loaded. Otherwise, assistive technologies
 * may not render the message.
 *
 */
export declare const MessageWrapper: ({ children }: MessageProps) => JSX.Element;
export {};