This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!

Input

Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.

work in progress
form
OverviewDesignUX textCodeAccessibility

Overview

Input are used to let the user enter text or numbers in a form.Optional field indicator. We always strive to only ask for mandatory information, so we want to inform users if some fields are optional. We do this by adding a parenthesis with the words "optional" next to the label with the field.

Variants

To be able to use forms in all context's we provide 2 versions of input fields.

  • Label outside (default): Includes all the features we need in complex forms.
  • Label inside: gives a more clean look but doesn't work for longer labels and can only be used in specific contexts.
Default, label outside.
Option number 2 used only in specific contexts.

Sets

To be able to use forms in all context's we provide 2 versions of input fields.

  • Regular text field
  • Multi lined text field, Multiple lines. Some text fields require a lot more text to be entered. A simple example would be description of a payment. For this we use the multi-line version of the input-field. This is often known as a text area or free text. Counter. For some fields it's critical that users know the limitations. Counters start at the max and count down to zero. When the counter comes close to zero the appearance shifts to red to warn the user before the fields stops accepting input.
Regular and search field.
Free text field.

Sizes

The input fields come in two sizes.

  • Normal: used in most cases.
  • Small: used in tables and in some special cases where the space is very limited.
Normal and small

Features

Label

All input fields need a label. Keep the label short and to the point.

Label support text

Use this to explain how to fill the field. This may be an instruction of how to count or what to include. Limit the instructions to details that all or most users need.

Label support text visible.

Field help

We can provide three types of help in relation to input fields

  • Instruction text: Additional instruction of how to think, what we expect, or what format is required.
  • Contextual help: Either as a tooltip, extended help that increase the size of the field with more instructions, or a slide-out with helptext.
  • Error text: If users fail in filling the field with correct information, the last help is the error text that can guide to a solution based on the entered information.
Field instruction visible.

Field counter

Text missing...

Field counter

Dynamic information

Used to perform comparative calculations next to the field. For example if users fill out salary after taxes, the dynamic information may show the salary before taxes.

Example on dynamic information

Static data

Sometimes you may want to output data from the system inside a form, but it's hard from the system an may not be changed. Then we output that data in plain text, formatted the same way as the form in general. Don't use disabled fields.

Example on static data

Auto complete

Input text can be used with auto complete to help users who have limited literacy or who write in a foreign language.Sometimes you may want to output data from the system inside a form, but it's hard from the system an may not be changed. Then we output that data in plain text, formatted the same way as the form in general. Don't use disabled fields.

Example on autocomplete

Do’s and dont’s

Do

  • Use "optional" to mark optional fields.

Don’t

  • Use asterix for indicate mandatory fields.
  • Avoid using watermarks or placeholders.
DO
DON'T
DON'T