Fields

MDS offers a variety of form field components, including text inputs, data inputs, and selects. As they share multiple characteristics, we use this page to describe them all in one place.

Guidelines

Best practices

Keep input labels brief and use the Helper message to add explanatory information if necessary.

Do not change the placement of the label.

If you limit the number of characters in a field, you should display a counter to inform the user of the limitation.

Left align the Fields with other components in their parent container.

The Field width should reflect the intended length of the content.

Properties

Helper message

Optional Helper message provides an extra explanation beyond the label. Use it when:

The label isn't clear enough on its own,

There are specific requirements e.g. for password fields,

You need to provide reassurance about why information is being collected, e.g., for a field to collect sex as listed on the passport: “This information is a legal requirement in the country of your stay.”

The Helper message is displayed under the Field’s container (it is hidden when the inline property is enabled).

The Helper message is the preferred placement for any additional information, as it is always visible for reference.

Placeholder

Optional Placeholder text that appears inside the Field’s container and disappears when the user starts typing or selects a value. Because it does not persist, Placeholder text should only provide exemplary data input. Never include essential information to enter correct data in the Placeholder text.

If you use a placeholder to indicate a specific format, don’t forget to repeat it in the Error Message. Better yet, use a Helper message instead to indicate the format.

Use placeholder copy to demonstrate a specific format requirement, such as email address, if it is not common knowledge or differs among regions.

Don't

Don’t use placeholder copy for things users need to remember as they start to enter information. Use helper text for this instead.

Required

In MDS, required Fields are marked with an asterisk, regardless of the required/optional Fields ratio in the Form, including the Forms with only required Fields. This reduces cognitive effort and error rates.

Optional fields do not need to be marked as “Optional”, as this adds unnecessary noise to our forms.

To make a Field required, enable the required property in the component. This will ensure the Field will be accessible and consistent with the others.

Don't

Do not add the word “optional” after the Field label, as it adds unnecessary noise to our forms.

Size

Fields come in four sizes: Small, Medium, Large, and Extra Large. The difference between them is the height of the Container and the spacing between the particular elements. When choosing a size, follow the below guidelines.

Usage/Sizes Examples

Examples of different sized Fields used in desktop and mobile breakpoints.

Small size should be used only when working with a very compact UI, to ensure a proper fit of the form on the page.

Medium is a default size on desktop and tablet breakpoints. It should also be used in the forms placed inside a Floating Panel.

Large Fields should be used when designing full-page forms to take advantage of the increased space available.

Extra Large size was created specifically for mobile devices. They provide a bigger tap area and should, therefore, be used on small touch screens.

captionIconWithTooltip

While we continue to support the Tooltip info, we strongly recommend against using it and instead encourage using the Helper Message for additional information. Due to its low accessibility, the Tooltip info should only be used in rare situations and for non-essential information. If you need further assistance, please contact the Mews Design System team.

Use Helper Message for any information that can help user fill the Field correctly.

Cautious

For non-essential information, that is not necessary for the user to fill the Field correctly you could use the info icon, but Helper message is always a better choice.

Don't

Avoid using both Helper Message and Info Icon for providing extra information.

Inline

When the Inline property is enabled, the Label, Helper message, Info Icon, and Error message are hidden. Only the Container remains visible. The error state is indicated by an Error Icon inside the container.

Alignment

Fields should be left aligned with other elements in the parent container.

The Field width should reflect the intended length of the content while still aligning to the grid. This gives users context clues about what information is expected while ensuring that text remains easily readable without causing strain or visual clutter.

Adjust the width of the Fields to the length of the intended content rather than the width of the parent container.

Don't

Don't stretch the Fields to always fill 100% of the parent container.

Content

General rule: keep labels and additional texts concise
Be as concise as possible. Eliminate extra words where possible, as long as you are being clear.

Label

Keep it concise: one to three words only. Any additional details needed should go in helper text, placeholder text, or tooltip (depending on context).

Use nouns or short phrases starting with verbs.

For Field label text, use nouns or short phrases starting with verbs.

Don't

Don’t use sentence fragments in which the field input text would make up the last part of the sentence.

Helper message

When listing requirements, you can use a bullet list to help users check their compliance.

When clarifying the purpose of the Field, explain what the user's benefit from providing the data is.

Use sentence case, and whenever possible, write the message as a complete sentence with punctuation.

When clarifying the purpose of the Field explain what that data helps to achieve.

Don't

Avoid ambigous and purposeless Helper Messages.

Use sentence case and write the message as a complete sentence with punctuation.

Keep the message short and clear.

Placeholder

Suggest exemplary data input or required format.

Use sentence case.

Avoid long placeholders.

Do not repeat Field’s Label in a Placeholder.

Use placeholder copy to demonstrate a specific format requirement, such as email address, if it is not common knowledge or differs among regions.

Don't

Don’t use placeholder copy for things users need to remember as they start to enter information. Use helper text for this instead.

Error message

Explain what to do next. Optionally, the message can explain why the error happened.

Use sentence case and write the message as a complete sentence with punctuation.

Don't