UNPKG

@intility/bifrost-react

Version:

React library for Intility's design system, Bifrost.

51 lines (50 loc) 1.97 kB
import type { PropsFor } from "../../types.js"; import Icon from "../Icon/Icon.js"; type IconProps = React.ComponentPropsWithRef<typeof Icon>; export type InputState = InputProps["state"]; export type InputProps = PropsFor<"input", { /** Required label text (Supports JSX) */ label: React.ReactNode; /** Hide label text, will add label prop as aria-label for screen readers */ hideLabel?: boolean; /** Font Awesome icon reference (or string if using library) */ icon?: IconProps["icon"]; /** Icon component props */ iconProps?: Partial<IconProps>; /** Icon position. Default is left side */ rightIcon?: boolean; /** Available states: `default`, `success`, `warning`, and `alert` */ state?: "default" | "success" | "warning" | "alert"; /** Feedback text below the input field */ feedback?: React.ReactNode; /** Description text to show more information */ description?: React.ReactNode; /** Bool to mark input required, but hides the required label */ requiredNoLabel?: boolean; /** Marks input as optional */ optional?: boolean; /** Display a clickable 'x' to clear the field */ clearable?: boolean; /** Display a loading spinner in the input */ loading?: boolean; /** onClick handler for icon */ onIconClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void; /** Display icon as filled button */ iconButton?: boolean; /** Inline style for internal `<input>` element */ inputStyle?: React.CSSProperties; /** CSS class name(s) for internal `<input>` element */ inputClassName?: string; /** Change the input size to small */ small?: boolean; }>; /** * Text input field * * @see https://bifrost.intility.com/react/input * * @example * <Input label="First name" /> */ declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>; export default Input;