When you wrap a control in a Field, the Field card provides the visual frame — border, background, focus ring. The control inside drops its own border/style and lines up with every other control in that frame.

What we mean by unified composition

Unified field composition means one consistent control row inside a Field, no matter which primitive you reach for:

• Plain text → Input
• Text with an adornment (password visibility, URL prefix) → InputGroup
• Amounts with a symbol or trailing action → NumberInput
• Choosing from a list → Select
• Multiple lines → Textarea

The goal is that a sign-in form, an amount field, and a settings picker feel like the same family when they sit in a Field — same visual weight, same rhythm, no one control shouting louder than the rest.

Inside vs outside a Field

Outside a Field, controls keep their own bordered style — what you expect from a standalone input on a page.

Inside a Field, that style moves to the card. Controls share the card's typography and spacing so the label and control read as one unit. Helper text and errors sit below the card — outside the input container — which matches common form patterns. Multi-line fields grow when you pass a larger rows value; at the default they match single-line controls.

Compact pickers in amount rows

Some choices — like currency on an amount field — need a smaller pill shape so they sit naturally beside the value, not as a second full-size row. The chip-style Select trigger is the pattern for that: it stays visually related to the amount row without breaking the unified feel.

What this is not

Dropdown menus, action menus, and popovers are separate surfaces. They open from a trigger but are not field controls themselves — different job, different composition rules.

See it live

Side-by-side comparison of every single-line control, standalone and inside a Field.

A fuller matrix — standalone vs inside Field, every control type, and amount-row composition with a currency chip.