Text input group

A text input group is a text field with extra elements that makes the pattern more complete for a common or frequent use case.

Layout

The layout of an input has a bit of freedom. You are allowed to configure elements on the left or the right side of the field or both at same time.

Usually the components placed around the textfield are buttons, split button and/or help labels. These help labels are placed to make more explicit things as currency, unit of measurement, digits, email addresses, etc.

Types

Default input group

Input group with button

Input group with units

Sizes

Input groups can be configured in 3 different sizes from small, to default, to large. The measures can be taken from input fields and buttons.