Print Desk

The Atom design system, rendered live from its own tokens and components — it cannot drift from what ships.

Docs Components

Input & Textareaexperimental

Where people type. The surface sits slightly raised, the border darkens on hover, and turns red with a message when something is wrong. Disabled fields sink into the page.

forminputtexttextarea

States

default — Raised background, strong hairline border.
hover — Border darkens to the rule color.
focus — Global focus ring (color-focus-ring, 2px, offset 2px).
invalid — Border switches to danger text color; FormField renders the message. aria-invalid=true.border-color: color-status-danger-text
disabled — Sunken background, muted text, not-allowed cursor.

API

Prop	Type	Description
`…native`	`InputHTMLAttributes / TextareaHTMLAttributes`	Thin forwardRef wrappers — all native props pass through; FormField injects the aria wiring.

Design specifications

height space-8
padding-x space-3
radius radius-sm
font type-body
background color-bg-raised
border color-border-strong / border-width-hairline
placeholder color-text-muted

Guidelines

shouldNumeric or ID-bearing inputs set font-variant-numeric: tabular-nums via the .tabular utility.
must-notNever change height per context; density comes from the future density tokens, not ad-hoc sizing.