BlankUI

form

Input

A single-line text input. Put it inside a Field for the label and errors.

npx blankui add input
Raw markdown for agentsRegistry JSON

Shown on your profile.

When to use

  • Short text like a name, email, password, number or URL.

Use something else when

  • Text that can be several lines long. Use textarea.
  • Picking one option from a known list. Use select.
  • A yes or no choice. Use checkbox.

Import

import { Input } from "@/components/ui/input"

Example

<Field label="Email" error={errors.email}>
  <Input type="email" placeholder="you@example.com" />
</Field>

Sizes: sm, default, lg. All native input props work (type, name, value, onChange, placeholder, disabled).

An input without a visible label, like a toolbar search box, needs an aria-label:

<Input type="search" aria-label="Search projects" placeholder="Search" />

Mistakes to avoid

AvoidInstead
<input className=...> (a raw input element)<Input>
<Input> without a Field or aria-label<Field label="Email"><Input type="email" /></Field>
<Input className="border-red-500"> to show an error<Field label="Email" error="Enter a valid email">

Install with the shadcn CLI: npx shadcn add https://blank.vageshwar.dev/r/input.json