Input Component

The Input component provides a flexible text input field with support for labels, validation, icons, and helper text.

Basic Usage

import { Input } from 'nebula-ui';
 
export default function Example() {
  return (
    <Input 
      label="Email" 
      placeholder="Enter your email" 
      type="email"
    />
  );
}

With Label

Always provide a label for accessibility:

<Input 
  label="Username" 
  placeholder="@username" 
/>

Helper Text

Add helpful instructions below the input:

<Input 
  label="Password" 
  type="password"
  helperText="Must be at least 8 characters"
/>

Error State

Display validation errors:

<Input 
  label="Email" 
  type="email"
  error="Please enter a valid email address"
/>

With Icons

Add icons to provide visual context:

import { Input } from 'nebula-ui';
import { Mail, Lock } from 'lucide-react';
 
<Input 
  label="Email"
  leftIcon={<Mail />}
  placeholder="email@example.com"
/>
 
<Input 
  label="Password"
  type="password"
  rightIcon={<Lock />}
/>

Input Types

Support for all standard HTML input types:

<Input type="text" placeholder="Text input" />
<Input type="email" placeholder="Email input" />
<Input type="password" placeholder="Password input" />
<Input type="number" placeholder="Number input" />
<Input type="tel" placeholder="Phone input" />
<Input type="url" placeholder="URL input" />

Full Width

Make the input span the full width:

<Input 
  fullWidth
  label="Full Width Input"
  placeholder="This input spans full width"
/>

Props

Prop	Type	Default	Description
`label`	`string`	-	Label text displayed above input
`error`	`string`	-	Error message to display
`helperText`	`string`	-	Helper text displayed below input
`leftIcon`	`ReactNode`	-	Icon displayed on the left
`rightIcon`	`ReactNode`	-	Icon displayed on the right
`fullWidth`	`boolean`	`false`	Makes input full width
`type`	`string`	`'text'`	HTML input type
`placeholder`	`string`	-	Placeholder text
`disabled`	`boolean`	`false`	Disables the input

Accessibility

The Input component is fully accessible:

Proper label association using htmlFor and id
Error messages are announced to screen readers
Keyboard navigation support
Focus management

Validation Examples

Email Validation

const [email, setEmail] = useState('');
const [error, setError] = useState('');
 
const validateEmail = (value: string) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(value)) {
    setError('Please enter a valid email address');
  } else {
    setError('');
  }
};
 
<Input 
  label="Email"
  type="email"
  value={email}
  onChange={(e) => {
    setEmail(e.target.value);
    validateEmail(e.target.value);
  }}
  error={error}
/>

Required Field

<Input 
  label="Name"
  required
  helperText="This field is required"
/>

Best Practices

Always use labels for accessibility
Provide helper text for complex inputs
Show clear error messages when validation fails
Use appropriate input types for better mobile UX
Add icons when they clarify the expected input

Examples

Login Form

<div className="space-y-4 max-w-md">
  <Input 
    label="Email"
    type="email"
    placeholder="you@example.com"
    leftIcon={<Mail />}
  />
  <Input 
    label="Password"
    type="password"
    placeholder="Enter your password"
    leftIcon={<Lock />}
  />
</div>

Search Input

<Input 
  placeholder="Search..."
  leftIcon={<Search />}
  fullWidth
/>