Input

InstallationCopy Anchor Link

Installs Field too.

UsageCopy Anchor Link

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function NameField() {
  return (
    <Field name="name">
      <FieldLabel required>Full name</FieldLabel>
      <Input required autoComplete="name" />
      <FieldDescription>As it appears on your ID card.</FieldDescription>
    </Field>
  );
}

Use Input for short single-line answers: names, IDs, email addresses, phone numbers. Set type and inputMode for the right keyboard, and autoComplete so browsers can fill it in. For numbers you add and subtract use Number Input; for several lines use Textarea.

AnatomyCopy Anchor Link

• Box (<div>): the border, fill, shadow and the underline.
• Start adornment (optional): an icon or a short prefix such as +966.
• Input (<input>): the text.
• End adornment (optional): an icon, suffix or button.

ExamplesCopy Anchor Link

SizesCopy Anchor Link

lg is 40px high (default) and md is 32px.

FillsCopy Anchor Link

appearance is default, lighter or darker. As in DGA, lighter and darker have no border at rest; it appears on hover, focus and press. The states below show them all.

Prefix and suffixCopy Anchor Link

startAdornment and endAdornment take an icon or text. They sit on the logical start and end sides. Phone numbers and emails stay left to right with dir="ltr".

RTLCopy Anchor Link

The text, placeholder and adornments start on the right. Typed Arabic aligns right; typed Latin text (an email) aligns with dir="ltr" when you set it.

AccessibilityCopy Anchor Link

• A native <input>: always label it with a Field; a placeholder is not a label.
• There is no outline. Hover darkens the border. Pressed (mouse or touch down) shows the pressed fill and the 2px underline at half width, growing from the centre. Focus (mouse or keyboard) shows the pressed border colour, the full-width underline and shadow-md (no shadow in dark mode). The underline grows from the centre to both sides in LTR and RTL alike, and is at least 3:1 on every fill.
• The default border is 3:1 or better against the page, light and dark (WCAG 1.4.11). See Deviations for the two states that are not.
• Errors set aria-invalid and show an icon with the message. Read-only fields stay focusable; disabled ones do not.
• Adornment icons are decorative (aria-hidden). A suffix button needs its own aria-label.

API ReferenceCopy Anchor Link

Deviations from DGACopy Anchor Link

• The default border is neutral-500, not neutral-400 (2.6:1 on white), so the field can be found at rest.
• The placeholder is neutral-500 as in DGA; only on the pressed and darker fills (4.34:1) does it use neutral-600.
• The error border is error-600 (the live DGA CSS), not the Figma error-700.
• A focused read-only field shows the underline, because it is still in the tab order.
• Known gaps, kept as DGA draws them: the read-only border (1.5:1) and the lighter and darker fills at rest (1.0 to 1.1:1).

ContrastCopy Anchor Link