Liferay.Design / Lexicon-1
Get StartedNews
Part of Liferay, IncCode/Content LicensesPowered by Gatsby and Netlify

Text input group

Sign In

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


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.


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


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.

Something to improve? Report an issue!