Inputs.
An input component lets users enter or edit text in a form or collection flow. It supports text, password, email and number types, and can carry helper text, inline validation, and leading or trailing icons.
Text inputs let users enter short, free-form content such as names, addresses, or search terms. Always pair an input with a visible label above it. Placeholder text is for examples only - never use it as a substitute for a label, since it disappears when the user starts typing.
Anatomy
Size
Three heights serve different UI densities. Medium (32px) is the Sprout default.
Use of icons
A leading icon indicates the type of input and reinforces the label - for example a search icon in a search field. A trailing icon adds an interaction: clearing the field, toggling password visibility, or confirming valid data with a checkmark. Icons should never be used for decoration alone.
Textarea
A textarea is the multi-line counterpart to the text input, for longer free-form content - notes, descriptions, comments. It ships in the same three sizes as the text input, grows taller instead of wider, and carries a right-aligned character count alongside the usual helper or error text. It never resizes horizontally.
Small (56px) suits a single compact note; Medium (80px) is the default for most forms; Large (120px) is for the one field on the page that is meant to hold real paragraphs - a description, a work order, a detailed comment.
The full state set, shown at Medium: