Input

Text input field with built-in validation states and icons.

formtextinput

Import

import { Input } from "@/components/ui";

Basic Usage

Input Preview

Code

tsx

<Input placeholder="Enter your name" />

With Label

Using FieldWrapper for form layout

1<FieldWrapper label="Email" required>
2  <Input type="email" placeholder="you@example.com" />
3</FieldWrapper>

With Icons

Add icons to input

1<Input
2  placeholder="Search..."
3  leftIcon={<Search className="h-4 w-4" />}
4/>
5
6<Input
7  type="email"
8  placeholder="Email"
9  rightIcon={<Mail className="h-4 w-4" />}
10/>

Error State

Show validation error

1<FieldWrapper label="Email" error="Invalid email address">
2  <Input type="email" error />
3</FieldWrapper>

Sizes

Available in multiple sizes

1<div className="space-y-2">
2  <Input size="sm" placeholder="Small" />
3  <Input size="md" placeholder="Medium" />
4  <Input size="lg" placeholder="Large" />
5</div>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring