import type { ChangeEventHandler, ReactNode } from 'react';
import React from 'react';
import type { EitherInclusive, ForwardedRefComponent } from '../../util/utility-types';
import type { Status } from '../../util/variant-types';
import FieldLabel from '../FieldLabel';
import { type IconName } from '../Icon';
import Input from '../Input';
export type InputFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
    /**
     * CSS class names that can be appended to the component.
     */
    className?: string;
    /**
     * Default value passed down from higher levels for initial state
     */
    defaultValue?: string | number;
    /**
     * Disables the field and prevents editing the contents
     */
    disabled?: boolean;
    /**
     * HTML id for the component
     */
    id?: string;
    /**
     * Gives a hint as to the type of data needed for text input (e.g., to render the correct input keyboard on mobile).
     */
    inputMode?: React.InputHTMLAttributes<HTMLInputElement>['inputMode'];
    /**
     * Node(s) that can be nested within the input field (e.g., secondary and tertiary `Button` components)
     */
    inputWithin?: ReactNode;
    /**
     * Maximum value allowed for the input, if type is 'number'.
     */
    max?: number | string;
    /**
     * Minimum value allowed for the input, if type is 'number'.
     */
    min?: number | string;
    /**
     * HTML name attribute for the input
     */
    name?: string;
    /**
     * Function that runs on change of the input
     */
    onChange?: ChangeEventHandler<HTMLInputElement>;
    /**
     * Toggles the form control's interactivity. When `readOnly` is set to `true`, the form control is not interactive
     */
    readOnly?: boolean;
    /**
     * Title attribute on input
     */
    title?: string;
    /**
     * HTML type attribute, allowing switching between text, password, and other HTML5 input field types
     *
     * **NOTE**: this excludes types that correspond to non-text controls, like `checkbox`, `radio`, etc.
     */
    type?: Extract<React.InputHTMLAttributes<HTMLInputElement>['type'], 'text' | 'password' | 'datetime-local' | 'date' | 'month' | 'time' | 'week' | 'number' | 'email' | 'url' | 'search' | 'tel'>;
    /**
     * Value passed down from higher levels for initial state
     */
    value?: string | number;
    /**
     * Text under the textarea used to provide validation hints or error message to describe the input error.
     */
    fieldNote?: ReactNode;
    /**
     * An icon that prefixes the field input.
     */
    leadingIcon?: IconName;
    /**
     * Placeholder attribute for input. Note: placeholder should be used sparingly
     */
    placeholder?: string;
    /**
     * Behaves similar to `maxLength` but allows the user to continue typing more text.
     * Should not be larger than `maxLength`, if present.
     */
    recommendedMaxLength?: number;
    /**
     * Indicates that field is required for form to be successfully submitted. Consumers must implement handling for error states using `status="critical"`
     */
    required?: boolean;
    /**
     * Whether it should show the field hint or not
     *
     * **Default is `"false"`**.
     */
    showHint?: boolean;
    /**
     * Status for the field state. Use `"critical"` for an error state.
     *
     * **Default is `"default"`**.
     */
    status?: 'default' | Extract<Status, 'warning' | 'critical'>;
    /**
     * Add additional descriptive text for the field name.
     */
    subLabel?: ReactNode;
} & EitherInclusive<{
    /**
     * Visible text label for the component.
     */
    label: string;
}, {
    /**
     * Aria-label to provide an accesible name for the text input if no visible label is provided.
     */
    'aria-label': string;
}>;
type InputFieldType = ForwardedRefComponent<HTMLInputElement, InputFieldProps> & {
    Input?: typeof Input;
    Label?: typeof FieldLabel;
};
/**
 * `import {InputField} from "@chanzuckerberg/eds";`
 *
 * An input with optional labels and error messaging built-in.
 *
 * **NOTE**: This component requires `label` or `aria-label` prop
 */
export declare const InputField: InputFieldType;
export {};