@react-md/form/types/text-field/TextField.d.ts

This package is for creating all the different form input types.

import type { CSSProperties, HTMLAttributes, InputHTMLAttributes, ReactNode, Ref } from "react";
import type { TextFieldContainerOptions } from "./TextFieldContainer";
/**
 * These are all the "supported" input types for react-md so that they at least
 * render reasonably well by default. There is no built-in validation or
 * anything adding onto existing browser functionality for these types.
 *
 * @remarks \@since 2.5.0 - `"search"` was added
 */
export declare type SupportedInputTypes = "text" | "password" | "number" | "tel" | "email" | "date" | "time" | "datetime-local" | "month" | "week" | "url" | "color" | "search";
declare type TextFieldAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "type">;
export interface TextFieldProps extends TextFieldAttributes, TextFieldContainerOptions {
    /**
     * The id for the text field. This is required for accessibility.
     */
    id: string;
    /**
     * The value to use for the text field. This will make the component
     * controlled and require the `onChange` prop to be provided as well otherwise
     * this will act as a read only text field.
     */
    value?: string;
    /**
     * The default value for the text field which will make it uncontrolled. If
     * you manually change the `defaultValue` prop, the input's value **will not
     * change** unless you provide a different `key` as well. Use the `value` prop
     * instead for a controlled input.
     */
    defaultValue?: string;
    /**
     * An optional floating label to use for the text field. This should really
     * only be used when the `theme` prop is not set to `"none"`. This will be
     * wrapped in the `<Label>` component itself and automatically apply the
     * `htmlFor` prop for this text field.
     */
    label?: ReactNode;
    /**
     * An optional style to apply to the label wrapper.
     */
    labelStyle?: CSSProperties;
    /**
     * An optional className to apply to the label wrapper.
     */
    labelClassName?: string;
    /**
     * The type for the text field. `react-md`'s `TextField` supports rendering
     * most of the input types, but will have no built-in validation or additional
     * functionality included.
     */
    type?: SupportedInputTypes;
    /**
     * An optional style to apply to the input itself. The `style` prop will be
     * applied to the container `<div>` instead.
     */
    inputStyle?: CSSProperties;
    /**
     * An optional className to apply to the input itself. The `className` prop
     * will be applied to the container `<div>` instead.
     */
    inputClassName?: string;
    /**
     * An optional ref to apply to the text field's container div element. The
     * default ref is forwarded on to the `input` element.
     */
    containerRef?: Ref<HTMLDivElement>;
    /**
     * Any additional html attributes that should be applied to the main container
     * div. This is probably only going to be used internally so that additional
     * accessibility can be added to text fields for more complex widgets.
     */
    containerProps?: Omit<HTMLAttributes<HTMLDivElement>, "style" | "className">;
}
/**
 * The text field is a wrapper of the `<input type="text" />` component with
 * some nice default themes. It can also be used to render other text input
 * types with _some_ support.
 */
export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
export {};