Input

A versatile text input component that supports prefix and suffix elements like icons or text labels. The component automatically adjusts element widths based on content.

Installation

import { Input } from '@geckoui/geckoui';

Basic Usage

<Input placeholder="Enter your name" />

Props API

Examples

With Prefix Icon

import { SearchIcon } from 'lucide-react';

<Input
  prefix={<SearchIcon size={16} />}
  placeholder="Search..."
/>

With Suffix Text

<Input
  type="email"
  suffix="@example.com"
  placeholder="username"
/>

With Both Prefix and Suffix

<Input
  prefix="$"
  suffix=".00"
  type="number"
  placeholder="0"
/>

Email Input

import { MailIcon } from 'lucide-react';

<Input
  type="email"
  prefix={<MailIcon size={16} />}
  placeholder="your.email@example.com"
/>

URL Input

<Input
  type="url"
  prefix="https://"
  placeholder="example.com"
  className="gap-0"
/>

Disabled State

<Input
  disabled
  placeholder="This input is disabled"
  value="Cannot edit this"
/>

Read-Only State

<Input
  readOnly
  value="Read-only content"
/>

Accessibility

• Input is wrapped in a <label> for better accessibility
• Automatically generates unique IDs if not provided
• Supports aria-disabled attribute
• Fully keyboard navigable
• Works with screen readers

Styling

The component uses BEM-style class names:

• GeckoUIInput - Main container
• GeckoUIInput--enabled - Applied when not disabled
• GeckoUIInput--disabled - Applied when disabled
• GeckoUIInput--readonly - Applied when read-only
• GeckoUIInput__input - The actual input element

Override styles using className for the container or inputClassName for the input element.

Related Components

• Textarea - Multi-line text input
• Label - Form labels with tooltip support
• InputError - Error message display
• RHFInput - React Hook Form integration