import { FormGroupProps } from "../FormGroup/FormGroup"; import { TextBaseInputProps } from "../TextField/TextBaseInput/TextBaseInput"; type FormGroupExposedProps = Pick; export interface TextFieldProps extends TextBaseInputProps, FormGroupExposedProps { /** * Set the Maximal length of the value for the input. * Adds a TextLengthIndicator to the right of the helpText. */ maxLength?: number; /** * If a value is set, the field is rendered in its invalid state. */ errorMessage?: string; } /** * Text fields enable the user to interact with and input content and data. This component can be used for long and short form entries. Allow the size of the text input box to reflect the length of the content you expect the user to enter. * * ### When to use * Use text fields for short-form text input such as names, emails, or search queries. * * ### When not to use * Do not use text fields for multi-line text input. Use TextAreaField instead. * * @example Basic text field * ```tsx * import { TextField } from "@trackunit/react-form-components"; * import { useState } from "react"; * * const MyForm = () => { * const [name, setName] = useState(""); * * return ( * setName(e.target.value)} * placeholder="Enter your name" * /> * ); * }; * ``` * @example Text field with validation and help text * ```tsx * import { TextField } from "@trackunit/react-form-components"; * import { useState } from "react"; * * const MyForm = () => { * const [email, setEmail] = useState(""); * const [error, setError] = useState(); * * const handleBlur = () => { * if (!email.includes("@")) { * setError("Please enter a valid email address"); * } else { * setError(undefined); * } * }; * * return ( * setEmail(e.target.value)} * onBlur={handleBlur} * errorMessage={error} * helpText="We'll never share your email" * required * /> * ); * }; * ``` */ export declare const TextField: { ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, isWarning, ref, required, ...rest }: TextFieldProps): import("react/jsx-runtime").JSX.Element; displayName: string; }; export {};