Input

Purpose

A single-line text field for free-form entry (text, email, password, number, etc. via the native type). For numeric entry with sanitization/clamping use number-input; for a date use date-picker; for multi-line use textarea.

Anatomy

Single styled native <input> (data-slot="input"). It is intentionally uncontrolled-by-default and forwards all native props.

Style

• No variants — one canonical look. Sizing is fixed (h-8) to align with button/select on a row; width is 100% (the parent controls layout).
• Uses tokens only (border-input, bg-transparent/dark:bg-input/30, placeholder:text-muted-foreground).

Behavior & functionality

• Fully controlled or uncontrolled per native semantics; pass value + onChange to control.
• Pair with label (via htmlFor/id) — the design system does not auto-render a label.

Accessibility

• Must have an associated <Label> or aria-label.
• States to honor: focus-visible (ring on --ring), disabled (non-interactive, muted, cursor-not-allowed), and aria-invalid (danger ring/border) — set aria-invalid when the field fails validation and wire an error message via aria-describedby.

Do / Don't

• ✅ Set aria-invalid + aria-describedby on validation errors.
• ✅ Use the native type for semantics/keyboards (email, tel, url).
• ❌ Don't build a numeric field from a raw Input — use number-input.
• ❌ Don't hard-code a fixed pixel width on the input; size the container.