Forms

Underline field

A label-hidden input over a single hairline; focus thickens the line to 1.5px with zero layout shift. Focus states are always visible — suppressed outlines are treated as a flaw, not a pattern.

label

string

Required; rendered sr-only for assistive tech.

…rest

input props

Everything else spreads onto the <input>. Server-safe — pass handlers only from client boundaries.

Ghost field

The boxed sibling: a full hairline rectangle that gains the interactive border weight on focus. Same contract as the underline field.

label

string

Required; rendered sr-only.

…rest

input props

Spread onto the <input>.

Newsletter bar

Input and dark submit sharing one border-current outline — a single bar, not two controls. Focus-within thickens the shared outline. Submit below to see the quiet confirmation.

buttonLabel

string?

Submit label.

label

string?

Accessible name for the input.

inputProps

input props?

Reaches the <input>; other props spread on the <form>.

Form status

Success and error as quiet paper blocks with a small mono state label. Error signals through the 1.5px border weight instead of a color tint — the monochrome answer to green/red fills.

state

"success" | "error"

Maps to role="status" / role="alert".

label

string?

Overrides the small uppercase state label ("Received" / "Error").

children

ReactNode

The message body.

Boxed fields (docs primitives)

The docs site’s own shadcn primitives, squared to brand. In app code prefer the package fields above.

Fields use the 18% ink hairline, mono uppercase labels, and square corners in brand contexts (rounded-none overrides the shadcn radius).