TextArea

The TextArea component provides a customizable text area field that can be used to collect user information, such as comments, feedback, or other types of data.

Usage Guidelines

Basic TextArea

Use the TextArea component to collect user information, such as comments, reviews, or other long-form types of data.

<TextArea placeholder="Leave your comments..." />

States

Error:
The error state of the textarea 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.

<TextArea placeholder="Leave your comments..." state="error" />

Success:
The success state of the textarea 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 textarea 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.

<TextArea placeholder="Leave your comments..." state="warning" />

Props

interface TextAreaProps

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

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

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.

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.