Text field

Angular

See content

Blazor

See content

Textfield is a component which allows the user to enter text on it.

Usage

Textfields are on a single line.

When to use

Use textfield when:

  • The user needs to type information in the system.

  • In a form to allow the user to enter information before submitting it.

Use a single text input to limit the amount of text to enter. You should specify the expected format in the title, such as number or email address.

If you need to display more text, use a textarea instead.

Anatomy

  1. Label: Text that indicate which type of text the texfield must contain

  2. Input text: The text typed by the user.

  3. Input box: The frame that contains the text typed by the user.

Label

The label should be speaking in the sense of the user's understanding, rather than in the system's language. The label must be short. The label can be accompanied by an icon.

Use “label” and give information on the purpose of the text field

Input text

A placeholder can be placed in this area, but it can’t be the only source of information to indicate what the textfield must contains. When the user start typing, the placeholder must disappear.

The placeholder must not be the only way to have the information display by it.

Input box

The size of the box must be adapted to the appropriate value requested by the textfield.

Type

Default

The default appearance of the textfield, a simple box with a label.

Focus

The textfield is highlighted when the user clicks on it and can type inside.

Error

If the user enter something that is not expected by the system.

Mandatory

A textfield can be mandatory in a form. It must be indicated clearly with a text beside the label (example: “mandatory”) and an icon in option.

Disabled

A textfield where the user can’t click on it and can't type text.

Placement

In a form, the textfield must be aligned vertically with the other elements of the form.

The user must be able to navigate between the textfields with the “tabs” key.

Do's & Don'ts

  • Field size should be adapted to the appropriate value.

  • If the number of digit is limited, it must be indicated.

  • Always put a label with a textfield.

  • Align the textfields with each other.

  • Don’t use only placeholder to pass on information.

Do

Always put a label for a text field. It will help the user to know the context of the input.

Don’t

Do not leave blank the label of a text field. It will be confusing and give no direction to the user.

Do

Helper or error message must be helpful for the user and understandable.

Don’t

Don’t insert a message that doesn’t give a clue. Explain to the user what it is expected, or how to fix the issue.

Do

Use relevant helper or error message with real-time feedback after the input according the nature of the answering.

Don’t

Don’t insert a popup or a modal for error message after validating. Several fields can be incorrect and modals can overload the page and make the user confused.

Do

Follow the rules regarding sentences for the labels.

Don’t

Don’t capitalize labels.

Do

Left-aligned the labels like the text input for a better readability.

Don’t

Don’t right align labels. It will be confusing and hard to read for users.

Do

Text field must be clear for the users, thanks to its form, color, label and stroke.

Don’t

Don’t choose color background which can be confusing and could remind about a button for the user. Moreover, don’t remove labels.

Do

Give always space, and leave the same gap between each text field.

Don’t

Don’t agglutinate text fields. More they are closer to each other, more it will be difficult for user to understand what it is expected.

Do

Insert text fields on the same line if the width fits into the screen width, and if the inputs are connected and constitent.

Don’t

Don’t place text fields that are not connected to each other on the same line.

Do

Placeholder can give specification on data to input but it’s better to associate it with a label to be clearer.

Don’t

Don’t use placeholder as an alternative to a label. When the user will input data, there won’t be any information showed because the placeholder will be vanished.

Do

Do use helpers with concision and clarity for the user. Tooltips can take over from helpers if more information as to be shown for the user.

Don’t

Do not overload helpers. These should be concise for the user. If you need to add more information, you can use a tooltip.

Log in

Log in with Michelin ID

To connect to the Design System, I will need:

  • A Michelin ID (e.g. F012345)
  • Double authentification (with the NetIQ application or by SMS)
  • A password associated with your Michelin ID

I don’t have a Michelin ID and/or email

In order to connect to the Design System, I need:

  • A user ID or an email
  • A password

If you have never accessed the Design System, you can request access via this link.