---
title: "Input"
description: "Input with sizes and variants"
source: "Equality"
---
import React from "react";
import { Input, IconButton } from "@eqtylab/equality";
import { Search, Eye, Mail, Check, User } from "lucide-react";

## Default

<Input
  id="input-default"
  type="text"
  placeholder="Enter text here..."
  value="Default input"
/>

## Disabled Input

<Input
  id="input-disabled"
  type="text"
  placeholder="Disabled input"
  disabled
  value="Disabled value"
/>

## Error State Input

<Input
  id="input-error"
  type="text"
  placeholder="Invalid input"
  className="border-red focus-visible:ring-red"
  value="Invalid value"
/>

## Email Input

<Input id="input-email" type="email" placeholder="user@example.com" />

## Password Input

<Input id="input-password" type="password" placeholder="Enter password" />

## Number Input

<Input
  id="input-number"
  type="number"
  placeholder="Enter number"
  min="0"
  max="100"
/>

## With Prefix Icon

{(() => {
const searchIcon = React.createElement(Search);
return (

<div className="flex flex-col gap-2">
  <Input
    id="input-prefix-search"
    type="text"
    placeholder="Search..."
    prefix={searchIcon}
  />
  <Input
    id="input-prefix-user"
    type="text"
    placeholder="Username"
    prefix={React.createElement(User)}
  />
  <Input
    id="input-prefix-mail"
    type="email"
    placeholder="Email address"
    prefix={React.createElement(Mail)}
  />
</div>
); })()}

## With Suffix Icon

{(() => {
const eyeIcon = React.createElement(Eye);
return (

<div className="flex flex-col gap-2">
  <Input
    id="input-suffix-password"
    type="password"
    placeholder="Password"
    suffix={eyeIcon}
  />
  <Input
    id="input-suffix-check"
    type="text"
    placeholder="Verified input"
    suffix={React.createElement(Check)}
    value="john@example.com"
  />
</div>
); })()}