...

The text field consists of:

• Label - a meaningful label of what information the user needs to provide. 

• Input Field (the input field can display a hint text).

States

...

Interaction

• Hover - hovering the text field will change the cursor to text cursor.

• Active -

  • Clicking the text field will place the cursor at the cursor position and the hint text will disappear. 

  • Double clicking a word inside the textfield will select that word.

  • Triple clicking the text field will select the whole text in the text field, if exists.

• Non active - If no text was inserted, the hint text will be displayed again when the field will lose focus.

If a character limit was set, reaching the limit will prevent the user from keeping typing. 

Validations and errors

Please refer to Field validation page for more information.

A text field with a warning will have an orange border and a warning icon, as displayed below: 

...

• Do not use the text field if:

  • The user needs to enter dates and times. In this case, use a Date Picker or a Time Picker.

  • The user needs to enter long texts. In this case, use a Text Area.

  • The user needs to perform a search. In this case, use a Search Field.

• Always provide a clear and meaningful label for any input field.

• Where appropriate, help users by providing hint texts which describes the expected value of the field.

• Text fields should indicate their state - enabled/disabled, empty/filled, valid/invalid.

• Proactively guide users to prevent errors. Help them to identify and fix errors as they occur.Provide an indicator when the field is required.

Accessibility compliance

...