Input

The Input component is a flexible and customizable input field with support for various states, labels, clearable inputs, and enhancers. Below you will find detailed information about its props and how to use it.

Props

Prop	Type	Default	Description
state	'danger' | 'success' | 'warning'	null	Indicates the state of the input field, affecting its border and background.
label	string	null	A label to display above the input field.
info	string	null	Additional information or hint text displayed below the input field.
clearable	boolean	false	If true, displays a clear button to reset the input field.
startEnhancer	ReactNode	null	A node to display at the start of the input field.
endEnhancer	ReactNode	null	A node to display at the end of the input field.
type	'text' | 'password' | 'number'	'text'	The type of the input field.
...props	React.InputHTMLAttributes	null	Additional props for the input element.

Example Usage

Basic Input

<Input
  label="Username"
  placeholder="Enter your username"
/>

Username

Input with Enhancers

<Input
  label="Search"
  placeholder="Search..."
  startEnhancer={<span>🔍</span>}
/>

Search

🔍

Clearable Input

<Input
  label="Email"
  placeholder="Enter your email"
  clearable
/>

Email

Password Input

<Input
  label="Password"
  type="password"
  placeholder="Enter your password"
/>

Password

Show

Input with State

<Input
  label="Username"
  placeholder="Enter your username"
  state="danger"
  info="This username is already taken."
/>

Username

This username is already taken.