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 default configuration

Input group with button

input group with left button

input group with right button

Input group with units

input group with mass on the left

input group with mass on the right

input group with mass on both sides

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.

Menu