Input

The Input component provides a consistent text input field with automatic icon assignment based on input type, custom icon support, and clearable functionality.

Features

• Standard HTML input types support
• Automatic icons based on input type
• Custom icon support
• Clearable input with clear button
• Consistent styling with form components
• File input styling
• Proper focus and disabled states

Usage

import { Input } from '@loke/design-system/input';

export default function Example() {
  return (
    <div className="space-y-4">
      <Input type="text" placeholder="Enter your name" />
      <Input type="email" placeholder="Enter your email" />
      <Input type="password" placeholder="Enter password" />
    </div>
  );
}

Tips:

• Use the appropriate type for automatic icon display.
• Add onClear prop to show a clear button.
• Pass a custom icon to override the automatic icon.

Props

All standard HTML input attributes are also supported.

Automatic Icons

The Input component automatically displays icons based on the input type:

Examples

Basic inputs

<Input type="text" placeholder="Enter text" />
<Input type="email" placeholder="Enter email" />
<Input type="password" placeholder="Enter password" />

Input types with icons

<Input type="email" placeholder="Email address" />
<Input type="password" placeholder="Password" />
<Input type="search" placeholder="Search..." />
<Input type="date" />
<Input type="time" />

Custom icons

import { User, Phone, Globe } from '@loke/icons';

<Input icon={User} placeholder="Username" />
<Input icon={Phone} placeholder="Phone number" />
<Input icon={Globe} placeholder="Website URL" />

Clearable input

const [value, setValue] = useState('');

<Input
  value={value}
  onChange={(e) => setValue(e.target.value)}
  onClear={() => setValue('')}
  placeholder="Type something..."
/>

Input states

<Input placeholder="Default input" />
<Input placeholder="Disabled input" disabled />
<Input type="file" />

Accessibility

• Uses native HTML input element for full accessibility support.
• Focus states are clearly visible with ring styles.
• Disabled state is communicated visually and via disabled attribute.
• Labels should be associated via id or wrapping Label component.
• Placeholder text provides input hints but should not replace labels.

Best practices

• Always pair inputs with labels for accessibility.
• Use appropriate input types for better mobile keyboards.
• Provide helpful placeholder text as hints, not instructions.
• Use onClear for search inputs and filters.
• Consider using FormField wrapper for form validation.
• Set appropriate autocomplete attributes for autofill.
• Use required attribute for mandatory fields.