Inputs

Input

A single-line text field for names, emails, numbers and files, in three sizes that line up with Button.

npx prodular-ui add input

With a field

Wrap the input in Field so the label and help text are linked to it.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"import { Input } from "@/components/ui/input"
export default function InputDefault() {  return (    <Field className="max-w-sm">      <FieldLabel>Work email</FieldLabel>      <Input type="email" placeholder="maya@northbeam.studio" autoComplete="email" />      <FieldDescription>We send the sign-in link here.</FieldDescription>    </Field>  )}

Sizes

sm, default and lg match the Button heights, so a filter bar lines up.

import { Button } from "@/components/ui/button"import { Input } from "@/components/ui/input"
export default function InputSizes() {  return (    <div className="flex w-full max-w-md flex-col gap-3">      <div className="flex items-center gap-2">        <Input size="sm" placeholder="Filter issues" aria-label="Filter issues" />        <Button size="sm" variant="outline">Apply</Button>      </div>      <div className="flex items-center gap-2">        <Input placeholder="Filter issues" aria-label="Filter issues" />        <Button variant="outline">Apply</Button>      </div>      <div className="flex items-center gap-2">        <Input size="lg" placeholder="Filter issues" aria-label="Filter issues" />        <Button size="lg" variant="outline">Apply</Button>      </div>    </div>  )}

States

Invalid, disabled, file and number inputs.

import { Field, FieldError, FieldLabel } from "@/components/ui/field"import { Input } from "@/components/ui/input"
export default function InputStates() {  return (    <div className="grid w-full max-w-xl gap-6 sm:grid-cols-2">      <Field invalid>        <FieldLabel>Project key</FieldLabel>        <Input defaultValue="web app" />        <FieldError>Use letters and numbers only, no spaces.</FieldError>      </Field>      <Field disabled>        <FieldLabel>Billing email</FieldLabel>        <Input defaultValue="finance@northbeam.studio" />      </Field>      <Field>        <FieldLabel>Invoice PDF</FieldLabel>        <Input type="file" accept="application/pdf" />      </Field>      <Field>        <FieldLabel>Seats</FieldLabel>        <Input type="number" defaultValue={24} min={1} className="tabular-nums" />      </Field>    </div>  )}

Anatomy

<Field>  <FieldLabel>Work email</FieldLabel>  <Input type="email" placeholder="maya@northbeam.studio" />  <FieldDescription>We send the sign-in link here.</FieldDescription></Field>

Guidance

Use it when

Short free text: names, emails, URLs, amounts, ids.
Use size sm in dense toolbars and table filters, lg on sign-in and onboarding screens.

Avoid

Text that runs past one line. Use Textarea.
Choosing from a known list. Use Select or Combobox.
Placeholder text as the only label. It disappears as soon as someone types.

Rules for AI agents

Published in llms-full.txt and the registry, so coding agents follow them when they build with this component.

Wrap every input in Field with a FieldLabel. Field links the label, description and error to the input, so do not pass id or htmlFor by hand.
Set type and autoComplete (email, current-password, one-time-code) so browsers and password managers can help.
Mark errors with Field invalid plus a FieldError message. Do not color the input yourself.
Match the size prop to the Button next to it: Input size sm with Button size sm.
Use tabular-nums on inputs that hold amounts or counts.
Use size="xs" on Input for dense toolbars and inspectors instead of overriding its height.

API

Input

Prop	Type	Default	Description
size	"xs" \| "sm" \| "default" \| "lg"	"default"	Height and text size. 28, 32 or 36px at default density.
type	string	"text"	Native input type.
aria-invalid	boolean		Shows the error border and ring. Set automatically inside an invalid Field.