ComponentsInput
Input
A customizable input component with icon support and password toggle
The Input component creates a customizable text input field with various features like floating labels, left and right icons, and password visibility toggle.
Tip!
Use the secure prop to create a password input with a visibility toggle.
Warning!
The Input component uses the 'use client' directive, ensuring it's only rendered on the client-side. Be mindful of this when using it in your Next.js application.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes for the input container |
| label | string | - | Label text for the input |
| leftIcon | component | - | Icon component to display on the left side of the input |
| rightIcon | component | - | Icon component to display on the right side of the input |
| leftIconOnClick | function | - | Function to execute when the left icon is clicked |
| rightIconOnClick | function | - | Function to execute when the right icon is clicked |
| focus | boolean | - | Whether to show focus styles |
| secure | boolean | - | Whether the input is for password entry |
| textSize | string | "text-lg" | Tailwind CSS class for text size |
Info
The component also accepts all standard HTML input attributes as additional props.
Usage Examples
Basic Input
Input with Left Icon
Password Input
Input with Right Icon and Click Handler
Custom Styled Input
Tip!
Combine different props to create inputs that match your design requirements and enhance user interaction.