Input

Overview

Input is a single-line text field for collecting short values such as names, emails, passwords, and numbers. It wraps a native <input>, so it accepts all standard input attributes (type, placeholder, value, disabled, min/max, and so on) and forwards a ref to the underlying element.

Beyond the native element, it adds prefix and suffix slots for placing an icon or other content inside the field — useful for a leading search icon or a trailing password-reveal toggle. Pair the input with a Label (via a shared id/htmlFor) so it has an accessible caption, or use it inside a Form field.

Usage

Import the component:

import { Input } from "@eqtylab/equality";

Basic usage:

<Input type="text" placeholder="Enter text here..." />

Controlled, driving the value yourself:

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

<Input value={value} onChange={(e) => setValue(e.target.value)} />;

States

Default

Disabled

Error

There is no dedicated error variant — apply error styling with className, or use Form, which applies invalid styling automatically from validation state.

Input Types

Because the underlying element is a native <input>, set the type prop to any standard value.

Email

Password

Number

Usage

<Input type="email" placeholder="user@example.com" />
<Input type="password" placeholder="Enter password" />
<Input type="number" min="0" max="100" />

Prefix & Suffix

Use the prefix and suffix props to render content inside the field, before or after the text. Any node works, though an icon is the most common.

With Prefix Icon

With Suffix Icon

Usage

import { Search, Eye } from "lucide-react";

<Input placeholder="Search..." prefix={<Search />} />
<Input type="password" placeholder="Password" suffix={<Eye />} />

Props

Input accepts all standard <input> attributes (type, placeholder, value, defaultValue, onChange, disabled, min, max, etc.) in addition to the props below.