import type { ChangeEventHandler } from 'react'; import React from 'react'; import type { Status } from '../../util/variant-types'; export type InputProps = React.InputHTMLAttributes & { /** * Aria-label to provide an accesible name for the text input if no visible label is provided. */ 'aria-label'?: string; /** * CSS class names that can be appended to the component. */ className?: string; /** * Disables the input 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 */ inputMode?: 'text' | 'email' | 'url' | 'search' | 'tel' | 'none' | 'numeric' | 'decimal'; /** * Maximum number the input can take. */ max?: number | string; /** * Minimum number the input can take. */ min?: number | string; /** * HTML name attribute for the input */ name?: string; /** * Function that fires when field value has changed */ onChange?: ChangeEventHandler; /** * Placeholder attribute for input. Note: placeholder should be used sparingly */ placeholder?: string; /** * Toggles the form control's interactivity. When `readOnly` is set to `true`, the form control is not interactive */ readOnly?: boolean; /** * Indicates that field is required for form to be successfully submitted */ required?: boolean; /** * Title attribute on input */ title?: string; /** * HTML type attribute, allowing switching between text, password, and other HTML5 input field types */ type?: React.HTMLInputTypeAttribute; /** * The value of the input */ value?: string | number; /** * The default value of the input */ defaultValue?: string | number; /** * Status for the field state * * **Default is `"default"`**. */ status?: 'default' | Extract; }; /** * Input component for one line of text. */ export declare const Input: React.ForwardRefExoticComponent & { /** * Aria-label to provide an accesible name for the text input if no visible label is provided. */ 'aria-label'?: string; /** * CSS class names that can be appended to the component. */ className?: string; /** * Disables the input 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 */ inputMode?: "text" | "email" | "url" | "search" | "tel" | "none" | "numeric" | "decimal"; /** * Maximum number the input can take. */ max?: number | string; /** * Minimum number the input can take. */ min?: number | string; /** * HTML name attribute for the input */ name?: string; /** * Function that fires when field value has changed */ onChange?: ChangeEventHandler; /** * Placeholder attribute for input. Note: placeholder should be used sparingly */ placeholder?: string; /** * Toggles the form control's interactivity. When `readOnly` is set to `true`, the form control is not interactive */ readOnly?: boolean; /** * Indicates that field is required for form to be successfully submitted */ required?: boolean; /** * Title attribute on input */ title?: string; /** * HTML type attribute, allowing switching between text, password, and other HTML5 input field types */ type?: React.HTMLInputTypeAttribute; /** * The value of the input */ value?: string | number; /** * The default value of the input */ defaultValue?: string | number; /** * Status for the field state * * **Default is `"default"`**. */ status?: "default" | Extract; } & React.RefAttributes>;