AG Design System

Component

Input

Single-line text field for user data entry. Pairs with Label and supports disabled, readonly, and error states.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/input

Usage

Always pair inputs with a visible label. Use placeholder as a hint, not a label replacement.

Playground

Preview

Configure

Leave blank to use the type default

Yes
No
No

Code

<div className="grid w-full max-w-sm gap-1.5">
  <Label htmlFor="input">Label</Label>
  <div className="relative flex items-center">
    <span className="pointer-events-none absolute left-2.5 text-muted-foreground">
      <Type className="size-3.5" />
    </span>
    <Input
      id="input"
      type="text"
      placeholder="Enter text…"
      className="pl-8"
    />
  </div>
</div>

Variants & States

Supported variants, sizes, and interaction states for this component.

States

  • Default
  • Focus
  • Disabled
  • Invalid

Do

  • Always pair with a visible label
  • Use placeholder text to show format (e.g. '[email protected]')
  • Add helper text below the field for format hints or privacy notes

Don't

  • Don't use placeholder as the only label
  • Don't remove the label for 'space', use a visually hidden label instead