Inputs & forms.
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. Checkboxes and switches follow the same shared recipe: crisp stroke, 4px radius, brand-green focus ring.
Text input
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.
Do's & Don'ts
Checkbox
Checkboxes let users select one or more options from a list. Each can be checked (selected) or unchecked (unselected), giving users direct control over their choices.
Some checkboxes support an intermediate (indeterminate) state, shown with a dash or shaded box. This indicates a partial selection - often used on parent items when child items have mixed selections. It helps users understand the selection is not fully applied.
Anatomy
Size
Checkbox size scales with surrounding text. The 16px medium size is the Sprout default.
Do's & Don'ts
Your favourite fruit?
Any allergies?
Switch
The Switch represents a binary state - on/off or enabled/disabled. It looks like a sliding button and gives immediate visual feedback on toggle. Switches are commonly used for preferences, settings, or feature activation. Unlike checkboxes, switches commit on toggle with no Save button required.
Anatomy
Size
Three sizes for different surface densities. Medium (34x18px) is the Sprout default.