Input

Overview

Input is a thin, fully accessible wrapper around <input>. It applies consistent border, focus ring, and error state styles while forwarding all native input attributes. Pair it with Label and FormField for complete form controls.

Usage

import { Input } from "@leanicon/web-builder-library";

<Input placeholder="Enter your email" />;

Variants

Input has no explicit variants — appearance is driven by native HTML attributes and ARIA state.

Text input

Email

Password

Use PasswordInput for a password field with a show/hide toggle.

Disabled

Invalid state

Set aria-invalid="true" to activate the destructive focus ring.

File upload

The file type renders a styled file picker using built-in file: pseudo-class styles.

With label (recommended pattern)

import { Label, Input } from "@leanicon/web-builder-library";

<div className="flex flex-col gap-1.5">
  <Label htmlFor="email">Email address</Label>
  <Input id="email" type="email" placeholder="[email protected]" />
</div>;

Controlled

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

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

Notes

• The component is w-full by default; wrap it in a width-constrained container as needed.
• Error styling is driven by aria-invalid rather than a prop, keeping it compatible with native form validation and third-party form libraries (e.g., React Hook Form).
• Dark mode adjusts background via dark:bg-input/30 automatically.
• For full form field composition with validation messages, use FormField from this library.