Class: Input

Description: The Input component is a reusable UI element for creating various types of input fields. It offers a comprehensive set of props for customization, including type, size, status, label, hint, error, and more. This component is responsible for rendering a styled input field based on the provided props, ensuring consistency and usability within the application.

Extends: N/A

Implements: N/A

Methods

Method: Input

Description: Renders a styled input field based on the provided props. The component can be used to create different types of inputs, such as text fields, textareas, email inputs, and more.

Parameters:

  • className (string): Additional CSS class name to apply to the input field.
  • children (node): Content to be rendered alongside the input field.
  • label (string): Label text to be displayed above the input field.
  • labelHidden (bool): Set to true to hide the label visually.
  • type (string): Type of input field to render. Possible values include: "textarea", "text", "email", "tel", "password", "number", "search", "color", "date", "time", "datetime-local". Default: "text".
  • name (string): Name attribute for the input field.
  • status (string): Status of the input field, used to visually indicate its state (e.g., success, error).
  • disabled (bool): Set to true to disable the input field. Default: false.
  • defaultVal (string): Default value for the input field.
  • formGroup (string): Class name for the form group containing the input field.
  • iconAlign (string): Position of the icon relative to the input field (e.g., "left", "right"). Default: "right".
  • size (string): Size of the input field (e.g., "small", "medium", "large").
  • placeholder (string): Placeholder text to be displayed inside the input field.
  • rows (number): Number of rows for the textarea input field. Default: 4.
  • hint (object): Object containing the hint text and its status (e.g., success, warning, error).
  • icon (any): Icon to be displayed next to the input field.
  • onIconClick (func): Callback function to be executed when the icon is clicked.
  • error (object): Object containing the error message and its status.
  • errorAlign (string): Alignment of the error message (e.g., "top", "bottom"). Default: "top".
  • ...props (any): Additional props passed to the underlying input element.

Returns:

  • node: The rendered input field element.

Throws:

  • N/A

Example:

import Input from "@/components/elements/Input";

// Basic text input
<Input label="Username" name="username" />

// Textarea input
<Input type="textarea" label="Description" rows={10} />

// Input with error
<Input label="Email" name="email" error={{ status: ErrorStatus.ACTIVE, message: "Invalid email address" }} />

==========