Input

Single-line text field with validation state, focus ring and file/placeholder support.

Preview

Live preview

API key

Found in workspace settings.

Usage

Examples

Invalid state

Enter a valid email address.

<Input invalid aria-label="Email" placeholder="you@example.com" />
<p className="text-xs font-medium text-destructive">
  Enter a valid email address.
</p>

With label and hint

Workspace name

Visible to everyone in the org.

<div className="space-y-2">
  <Label htmlFor="workspace">Workspace name</Label>
  <Input id="workspace" placeholder="Acme Inc" />
  <p className="text-xs text-muted-foreground">Visible to everyone in the org.</p>
</div>

Disabled and read-only sizing

<Input disabled value="Locked field" readOnly aria-label="Field" />
<Input className="h-11 px-4 text-base" aria-label="Large input" />

Reference

Props

Prop	Type	Default	Description
invalid	boolean	—	Marks the field invalid: sets aria-invalid, data-invalid and the destructive border.
type	string	"text"	Native input type — email, password, search, number…
placeholder	string	—	Hint shown while empty. Not a substitute for a label.
disabled	boolean	—	Native disabled state — dimmed, skipped by tab and pointer.
required	boolean	—	Native required flag: browser validation plus SR announcement.
…native input attrs	InputHTMLAttributes<HTMLInputElement>	—	value, onChange, autoComplete, minLength, inputMode, …

Accessibility