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

Forms

Sign In
View in ClayDocumentation

Forms obtain user data and transmit it to the system to either store the data, produce an action, or both.

Parts

lexicon default

  1. Title (Required)
  2. Description (Not required but very useful). It should describe the form usage.
  3. Form Elements:
    1. Text input. See text input for more information.
    2. Text input localizable. See text input localizable for more information.
    3. Selector. See selectors for more information.
    4. Radio button. See checkbox, radio, and toggle for more information
    5. Checkbox. See checkbox, radio, and toggle for more information.
  4. Section. Sections are identified with a 14px size primary text that is always in uppercase letters. Some forms may require a full width underline for a better visual separation of content. This is usually used in configuration forms.
  5. Buttons. Visit Actions to learn how buttons are used in forms.

Layout

Forms can occupy one or two columns. If your form is divided into several sections that are stacked, it's best to keep the internal layout between sections. This can affect the experience of filling the whole form. When adding columns, remember that the reading direction for each column is left to right and top to bottom. The user reads column one first, then they read column two.

One single form

lexicon default

Two columns form

lexicon default

Attributes

Spacing

It's very important to maintain the distance between form elements, such as texts, fields, sections, etc. Please see our hierarchy page for guidance.

As a general rule of thumb, use the following distances for spacing between form elements:

DescriptionDesktopMobile
Form padding24px16px
Horizontal
- Between consecutive components16px16px
- Between non-consecutive components24px24px
Vertical
- Between consecutive components: title, fields, section...24px16px
- Between form title or title + description for next component48px32px

Title

form title style and measures

Sections

First level sections can be collapsible. Note that second level sections, however, can never be collapsible.

form sections style and measures

The layout must wrap long section titles.

form sections style and measures for long titles

Paragraph

form paragraph style and measures

Something to improve? Report an issue!
Menu