Input

Single-line text fields for forms and filters. Use sizes to match surrounding controls, and mark invalid fields when validation fails.

Examples

Default

Ghost

Sizes

Invalid

Disabled

Overview

Input is a single-line text control. The default variant uses surface, border, and focus-ring tokens. Ghost drops the border and fill for quiet fields in toolbars and titles. Both support three sizes and an invalid state.

tsx

import { Input } from "@standard-ui/react"

<Input placeholder="Email address" aria-label="Email address" />

Usage

Variants

Variant	Use it for
default	Standard form fields — bordered surface with inset edge.
ghost	Quiet fields in toolbars, page titles, and dense chrome where a border adds noise.

tsx

<Input placeholder="Email" aria-label="Email" />
<Input variant="ghost" placeholder="Search…" aria-label="Search" />

Sizes

Size	Height	Use case
sm	32px	Dense forms, toolbars, compact filters
md	36px	Default — most form fields
lg	40px	Prominent fields, marketing forms

tsx

<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />

Invalid

Set invalid when the value fails validation. Pair with helper or error text so users know how to fix it. aria-invalid is set automatically.

tsx

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

Disabled

Disabled inputs use reduced opacity and cursor-not-allowed. Prefer explaining why a field is unavailable instead of a silent disable.

tsx

<Input disabled placeholder="Unavailable" aria-label="Unavailable" />

API

Input accepts all standard HTML input attributes except native size, which is reserved for the visual size prop.

Prop	Type	Default	Description
variant	"default" \| "ghost"	"default"	Visual style of the field.
size	"sm" \| "md" \| "lg"	"md"	Height and padding of the field.
invalid	boolean	false	Shows the invalid border.
disabled	boolean	false	Disables the input.
type	string	"text"	Native input type.

Guidelines

Do

Always provide an accessible name via aria-label, aria-labelledby, or a wrapping label
Use variant="ghost" for search bars and inline titles where a full field chrome is too heavy
Match input size to nearby buttons and controls
Use invalid with visible error text, not color alone
Keep placeholders as hints — not as replacements for labels

Don't

Don't rely on placeholder text as the only field label
Don't disable inputs without explaining why
Don't use invalid for non-error emphasis