You are reading the v1 docs. v2 renamed several props and replaced GeckoUIPortal with GeckoUIProvider. Read this page in v2.

Live examples are only rendered in the v2 docs.

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

Prop	Type	Default	Description
`prefix`	`ReactNode \| ((props) => ReactNode)`	-	Element displayed before the input (icon, text, or component)
`suffix`	`ReactNode \| ((props) => ReactNode)`	-	Element displayed after the input (icon, text, or component)
`inputClassName`	`string`	-	CSS class for the input element itself (for placeholder styles, etc.)
`className`	`string`	-	CSS class for the container wrapping prefix, input, and suffix
`disabled`	`boolean`	`false`	Disable the input
`readOnly`	`boolean`	`false`	Make the input read-only
...rest	`InputHTMLAttributes`	-	All standard HTML input attributes

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="[email protected]"
/>

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 a base class with data attributes for states:

GeckoUIInput - Main container
GeckoUIInput[data-state="enabled"] - Applied when not disabled
GeckoUIInput[data-state="disabled"] - Applied when disabled
GeckoUIInput[data-readonly] - Applied when read-only
GeckoUIInput__input - The actual input element

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

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

Input

On this page