@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
51 lines (50 loc) • 1.97 kB
TypeScript
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;