Input

A single-line text field. A native <input> underneath, so typing, selection, and every type variant come from the browser — this adds sizing and the visual language shared with Button.

Source Storybook Accessibility

Usage#

import { Input } from "neelam-ui";
 
<label className="flex flex-col gap-1.5">
  Email
  <Input type="email" placeholder="ada@example.com" />
</label>

type passes straight through, so email, password, search, number, and the rest behave — and validate, and summon the right mobile keyboard — exactly as the platform intends.

Sizes#

Labelling#

There is no bundled label or helper-text component. A <label> wrapping the input, or linked with htmlFor, already associates the two natively.

Placeholder is not a label

A placeholder disappears the moment the user types — exactly when they most need to remember what the field is for — and is not reliably announced. Use it for an example value, never as the field's name.

Invalid state#

The error styling keys off aria-invalid directly rather than a separate invalid prop. aria-invalid is already the real signal assistive tech reads, so a second prop carrying the same fact would just be something else to keep in sync with it.

Enter a valid email address.

Pair it with aria-describedby pointing at the message, so the error is announced as part of the field rather than being red text that happens to sit nearby:

<Input id="email" aria-invalid aria-describedby="email-error" />
<p id="email-error">Enter a valid email address.</p>

Keyboard#

Keyboard shortcuts
Key	Behaviour
`Tab`	Moves focus to the field. Disabled fields are skipped.
`Escape`	Clears the field when type="search", in browsers that implement it.

Everything else — caret movement, selection, undo, clipboard — is native text input behaviour and is deliberately untouched.

Accessibility#

Renders a native <input>; role, focus, and form participation come from the platform.
Invalid styling is driven by aria-invalid, so the visual state and the announced state cannot drift apart.
Focus-visible uses a layered box-shadow rather than outline, so the ring stays visible inside overflow containers.
The disabled palette keeps placeholder text above the contrast floor rather than fading it out entirely.

API reference#

Props for Input
Prop	Type	Default
`size`	`"sm" \| "md" \| "lg" \| null`	—

Also accepts every native <input> attribute apart from size, which is taken over for the visual scale — use maxLength or a className width for sizing.