primitives

Input

Single-line text field. Use for short, scalar values (name, slug, email). For multi-line content use Textarea; for choice between options use a Select / Combobox.

Inherits all native `<input>` props. Validation state is communicated via `aria-invalid` — no custom prop. Pair with `<Label>` and ideally `<Field>` for full form semantics (description + error rendering).

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/input.json

Or import from the workspace package:

import { Input, Label } from "@8maverik8/design";

Examples

Basic

Name

<div className="flex flex-col gap-1.5">
  <Label htmlFor="name">Name</Label>
  <Input id="name" placeholder="Jane Doe" />
</div>

Invalid state

Drive the red border + ring from `aria-invalid` — no extra styling needed.

<Input aria-invalid defaultValue="not-an-email" />

Disabled

<Input disabled placeholder="Read-only" />

Variants

size

default(default)32px — same height as `<Button size="default">`. Use in forms and table-page header search fields paired with default Buttons.
sm28px — pairs with `<Button size="sm">` in dense rows.
xs24px — pairs with `<Button size="xs">` (chip-row triggers).
toolbar26px (`--spacing-toolbar`) — pairs with `<Button size="toolbar">` in diff/list strips.
lg40px — pairs with `<Button size="lg">` in heroes / onboarding.

Guidelines

Always pair an Input with a `<Label htmlFor>` — even if the label is `sr-only`.Screen readers and click-target expansion both depend on the label association.
Match the `size` of the Input to the `size` of any sibling Button in the same row.`<Input size="sm">` next to `<Button size="sm">` lines up; `<Input>` (default 32px) next to `<Button size="sm">` (28px) reads as a sized-down search box and is the most common DS regression in table-page headers.
Use a separate `error` prop or red border manually.Set `aria-invalid` instead — the design system already styles invalid state from that attribute.
Use `type` correctly (email, url, number, date, search) — not just `text`.Mobile keyboards and browser autofill rely on it.