Form Elements / Inputs, add-ons, and selection controls.

Text fields

The base text control. Always pair a field with a Label; helper or error text sits directly beneath it. Disabled fields drop to 50% and stop pointer events.

Sizes

The size prop matches the control height to its context: default 36px, lg 40px, xl 48px. Fields sit one step taller than the 32px button base; Input, Textarea, Select, and InputGroup share the scale.

In-field add-ons

Seat an icon or an action inside the field with InputGroup. An InputGroupAddon holds the content (inline-start or inline-end); the group owns the focus ring and click-focuses the input. The group takes the same size scale, and the inline button is sized to leave even breathing room at each height.

The trailing button can carry a label instead of an icon. Pass iconOnly={false}; either way the button auto-sizes to the group height with a uniform inset, so you never hand-size it.

Multiline

Textarea is full-width and grows with its content (field-sizing-content) rather than being pinned to a fixed height; each size sets the type ramp and a min-height floor.

Selection

Select for a fixed option list; the searchable Combobox when the list is long or typeahead helps.

Conversational (borderless)

A chrome-less, display-scale field for one-question-at-a-time flows like the contact modal. No border, fill, or label, since the prompt above it does the framing. Transparent background, an accent caret, and font-light display type. The single-line field submits on Enter; the multiline variant on Cmd/Ctrl+Enter.

size steps the display ramp: xl is the contact prompt (28→36px), with lg and default one notch back on each breakpoint.

The multiline variant stays body-sized (text-base) regardless of size, since long-form entry reads better than a display ramp.