adwaita-web/dist/components/Input.d.ts

A GTK inspired toolkit designed to build awesome web apps

import React from "react";
import type { AdwaitaIcon } from "../icons";
import type { ExtendElementProps } from "../utils/extendElementProp";
export declare type InputProps = ExtendElementProps<"input", {
    /** The HTML input type */
    type?: string;
    value?: string;
    defaultValue?: string;
    className?: string;
    /** Size of the input */
    size?: "mini" | "small" | "medium" | "large" | "huge" | "mega";
    /** Shows a loading indicator */
    loading?: boolean;
    /** Icon name or node (left) */
    icon?: AdwaitaIcon;
    /** Icon name or node (right) */
    iconAfter?: AdwaitaIcon;
    placeholder?: string;
    /** Disable the input */
    disabled?: boolean;
    /** Flat style input */
    flat?: boolean;
    /** Error style input */
    error?: boolean;
    /** Warning style input */
    warning?: boolean;
    /**
     * Show a progress bar of `progress` percent size if it's a number, or an
     * undeterminate (loading) bar if `true`
     */
    progress?: boolean | number;
    /** Show a button to clear the input value */
    allowClear?: boolean;
    /** Called when the input value changes, with the new value */
    onChange?: (value: string) => void;
    /** Called when Enter is pressed (prevents default behavior) */
    onAccept?: (value: string) => void;
    /** Called when the `iconAfter` is clicked */
    onClickIconAfter?: () => void;
}>;
export declare const Input: React.ForwardRefExoticComponent<{
    /** The HTML input type */
    type?: string | undefined;
    value?: string | undefined;
    defaultValue?: string | undefined;
    className?: string | undefined;
    /** Size of the input */
    size?: "small" | "mini" | "medium" | "large" | "huge" | "mega" | undefined;
    /** Shows a loading indicator */
    loading?: boolean | undefined;
    /** Icon name or node (left) */
    icon?: AdwaitaIcon | undefined;
    /** Icon name or node (right) */
    iconAfter?: AdwaitaIcon | undefined;
    placeholder?: string | undefined;
    /** Disable the input */
    disabled?: boolean | undefined;
    /** Flat style input */
    flat?: boolean | undefined;
    /** Error style input */
    error?: boolean | undefined;
    /** Warning style input */
    warning?: boolean | undefined;
    /**
     * Show a progress bar of `progress` percent size if it's a number, or an
     * undeterminate (loading) bar if `true`
     */
    progress?: number | boolean | undefined;
    /** Show a button to clear the input value */
    allowClear?: boolean | undefined;
    /** Called when the input value changes, with the new value */
    onChange?: ((value: string) => void) | undefined;
    /** Called when Enter is pressed (prevents default behavior) */
    onAccept?: ((value: string) => void) | undefined;
    /** Called when the `iconAfter` is clicked */
    onClickIconAfter?: (() => void) | undefined;
} & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "progress" | "ref" | "defaultValue" | "className" | "placeholder" | "onChange" | "disabled" | "type" | "value" | "size" | "icon" | "loading" | "flat" | "warning" | "iconAfter" | "error" | "allowClear" | "onAccept" | "onClickIconAfter"> & React.RefAttributes<HTMLDivElement>>;