Input

The Input component provides a customizable input field that can be used to collect user information, such as name, email, password, or other types of data.

Usage Guidelines

Basic Input

Use the Input component to collect user information, such as name, email, password, or other types of data.

<Input placeholder="Email address" type="email" />

Prefix

Use the prefix prop to add a prefix to the input field. The prefix can be used to provide additional context.

<Input align="right" placeholder="0.00" prefix="$" value="9.00" />

Suffix

Use the suffix prop to add a prefix to the input field. The suffix can be used to provide additional context.

<Input placeholder="Search for product" suffix={<Icon icon={SearchIcon} />} />

States

Error:
The error state of the input field is used to indicate that the user has entered invalid information. The error state is typically used to indicate that the user has entered invalid information, such as an invalid email address or password.

<Input type="password" value="secret-password" state="error" />

Success:
The success state of the input field is used to indicate that the user has entered valid information. The success state is typically used to indicate that the user has entered valid information, such as a valid email address or password.

<Input type="password" value="secret-password" state="success" />

Warning:
The warning state of the input field is used to indicate that the user has entered information that may be incorrect or incomplete. The warning state is typically used to indicate that the user has entered information that may be incorrect or incomplete, such as an incomplete email address or password.

<Input type="email" value="me@example.com" state="warning" />

Props

interface InputProps

align ? "left" | "right" | null

Change the alignment of the input text.

Defaults to left

prefix ? AddonProps

Render the input with a prefix.

state ? "error" | "success" | "warning" | null

Changes the appearance of the input to indicate an error, success, or warning state.

suffix ? AddonProps

Render the input with a suffix.

className ? ClassNameOrFunction

The CSS className for the element. A function may be provided to compute the class based on component state.

style ? StyleOrFunction

The inline style for the element. A function may be provided to compute the style based on component state.

placeholder ? string

Temporary text that occupies the text input when it is empty. See MDN.

onHoverStart ? (e: HoverEvent) => void

Handler that is called when a hover interaction starts.

onHoverEnd ? (e: HoverEvent) => void

Handler that is called when a hover interaction ends.

onHoverChange ? (isHovering: boolean) => void

Handler that is called when the hover state changes.