Input

Text input component with support for icons, validation states, and various input types.

Import

import { ZInput } from "@zurto/ui";

Basic Usage

ZInput

1

<ZInput placeholder='Enter your name' />

With Label

ZInput

Email Address

12345

<ZInput 
  label='Email Address'
  placeholder='john@example.com'
  type='email'
/>

Required Field

ZInput

Username *

12345

<ZInput 
  label='Username'
  placeholder='Enter username'
  required
/>

Input Types

ZInput

12345

<ZInput type='text' placeholder='Text input' />
<ZInput type='email' placeholder='Email input' />
<ZInput type='password' placeholder='Password input' />
<ZInput type='number' placeholder='Number input' />
<ZInput type='search' placeholder='Search...' />

Sizes

ZInput

123

<ZInput size='sm' placeholder='Small input' />
<ZInput size='md' placeholder='Medium input' />
<ZInput size='lg' placeholder='Large input' />

With Icons

ZInput

1234

import { Search, Mail, Lock } from 'lucide-react'
<ZInput leftIcon={<Search />} placeholder='Search...' />
<ZInput leftIcon={<Mail />} placeholder='Email address' />
<ZInput leftIcon={<Lock />} type='password' placeholder='Password' />

Validation States

Error State

ZInput

Please enter a valid email address

1234

<ZInput 
  placeholder='Invalid email'
  error='Please enter a valid email address'
/>

Success State

ZInput

1234

<ZInput 
  placeholder='Valid input'
  success
/>

With Helper Text

ZInput

PasswordMust be at least 8 characters

12345

<ZInput 
  label='Password'
  type='password'
  hint='Must be at least 8 characters'
/>

Disabled State

ZInput

1

<ZInput disabled value='Cannot edit' />

Props

Prop	Type	Default	Description
type	'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url'	'text'	HTML input type
size	'sm' | 'md' | 'lg'	'md'	Input size
label	string	–	Label text above the input
placeholder	string	–	Placeholder text
value	string	–	Controlled input value
defaultValue	string	–	Default value for uncontrolled input
onChange	(e: ChangeEvent) => void	–	Change event handler
leftIcon	ReactNode	–	Icon displayed on the left
rightIcon	ReactNode	–	Icon displayed on the right
error	string | boolean	–	Error state or error message
success	boolean	false	Success validation state
hint	string	–	Helper text below input
disabled	boolean	false	Disable the input
required	boolean	false	Mark as required
clearable	boolean	false	Show clear button when input has value

Accessibility

• Uses native <input> element with proper type attribute
• aria-invalid="true" applied on error state
• aria-describedby links input to error/hint message
• aria-required applied when required
• Clear button is keyboard accessible with proper aria-label

Keyboard Support

Key	Action
Tab	Move focus to/from input
Escape	Clear input (when clearable)
Enter	Submit form (in form context)