Input
A customizable input component with icon support, password toggle, and more.
The Input component creates a customizable text input field with various features like floating labels, left and right icons, and password visibility toggle.
Use the secure prop to create a password input with a visibility toggle.
Usage
javascript
1import Input from "@/components/atoms/Input"; 2 3<Input 4 id="username" 5 label="Username" 6 placeholder="Enter your username" 7/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | - | The id of the input. |
| label | string | "" | The label for the input. |
| labelMode | "none" | "above" | "float" | "none" | If true, the label floats above the input when focused. |
| labelBackground | string | "bg-bg-50 dark:bg-bg-900" | The background color of the label (only needed when using the floatingLabel). This is a little hacky, it will match the default background colors so you only need to modify when the background is different. |
| size | "sm" | "md" | "lg" | "md" | The size of the button. |
| borderRadius | string | "md" | The border radius of the button (uses Tailwind border radius to shape component). |
| shadow | string | "" | The shadow of the button (uses Tailwind shadow to shape component). |
| leftIcon | Icon | - | The icon to display on the left side of the input. |
| rightIcon | Icon | - | The icon to display on the right side of the input. |
| leftIconOnClick | function | - | The function to call when the left icon is clicked. |
| rightIconOnClick | function | - | The function to call when the right icon is clicked. |
| secure | boolean | false | If true, the input is a password field with a visibility toggle (automatically adds a right icon to toggle visibility). |
| focus | boolean | true | If true, applies a focus effect. |
| activeColor | string | "primary" | The base color (use tailwind.config). |
| value | controlledValue | - | The controlled value of the input. |
| onChange | function | - | The function to call when the input value changes. |
| className | string | "" | Additional Tailwind utility classes. |
| textClassName | string | "" | Additional Tailwind utility classes for the text. |
| ...props | object | - | Any other valid HTML attributes for the button or Link. |
The component also accepts all standard HTML input attributes as additional props (i.e. type, placeholder, etc.).
Examples
Different Label Modes
Input with Icons
Password Input
Custom Styled Inputs
Combine different props to create inputs that match your design requirements and enhance user interaction.