Text field

Text field is used when the user needs to fill in the text in the interface.

check_circle_outline

Fully implemented in LOGEX Framework.

Variants

Single- and multi-line

There are two main variants: single- and multi-line text fields. The single-line text field is used to fill in short information such as name, department, or cost. The multi-line text field is used for longer texts, such as comments.

  1. Single-line text field
  2. Multi-line text field

Prefix and suffix

The fields can be accompanied by a prefixed or suffixed value (such as a currency symbol or a percentage). By default, this symbol is subtler and during input hidden entirely.

  1. Only value
  2. Prefix text
  3. Suffix text

Anatomy

  1. Label
  2. Input field
  3. Placeholder
  4. Draggable icon

Usage

Label

The label is always required.

Place the label to the left of the field.

Place the label on the top of the field.

Keep the label short and clear.

Do not use long labels and never truncate them.

Other elements

Use supporting text to help the user or to show additional information such as a character count.

If some fields are required, indicate them with an asterisk.

Something missing? Contact one of the designers.