Fields
Fields allow users to enter an input. They will provide answers we cannot foresee unlike pickers.
Overview
Different types of fields can be used in forms. Each one of them represents a precise type of information to collect. Make sure to use the right field for the right type of information to guide users when filling out a form.
Guidelines
We do not recommend using Placeholder text for most of our form fields, as it is not accessible and disappears when users start typing their information. Use Helptext instead to convey extra information to help fill in the field. Learn more about Placeholder text and Helptext
💡How to manage errors? Learn more about Error Management in forms
Text Field
Text Field is the most basic form element. It provides a single-line, plain-text input control. It should be used when we expect a short answer from users.
We provide multiple optional features to custom the field, such as: Label, Requirement Indicator (red asterisk), Tooltip, Suffix or Prefix, Placeholder and Helptext.
Text Area Field
Text Area Field is different from Text Field because it allows users to write more than a single-line answer. This component would be preferred for use cases such as messaging, comments, or descriptions.
It has almost the same options as Text Field, including has counter,only without Prefix and Suffix options. Also, users can interact with the field at its bottom-right corner to expand it.
Email Field
Email Field is a specific form element. It must only be used to provide mail information. This field cannot be used to collect other information than mail. This component is subject to a technical format validation: users will have to enter a mail format to validate this field. Otherwise, the field will be in an error state.
A mail icon helps users differentiate this specific field from any other field. It is automatically included in the component and cannot be removed.
Like Text Field, optional features are available to custom the field only without Prefix and Suffix options.
Password Field
Password Field is a specific form element. It must only be used to fill in or inform about passwords. This field cannot be used in any other use case than a password.
Show/Hide is a specific feature to this field: when clicking on the eye icon, users can reveal or hide the password. It is automatically included in the component and cannot be removed.
Float Number Field
Float Number Field is a specific form element that only accepts numeric inputs. It can be used for use cases such as percentages, measurement, and delays.
Float Number Field shouldn't be used for any monetary information. Dedicated Monetary Field (see below) is more appropriate for this use case.
For Percentages, we strongly recommend using Float Number Field with a String Prefix "%"
Optional features are available to custom the field, such asLabel, Requirement Indicator (Red asterisk), Tooltip, Placeholder and Helptext
Specific features are also available to custom the field:
Select Prefix: allow users to choose a unit between at least two options.String Prefix: visual help to understand which unit number is required. Users cannot change it.
Number formatting is automatically defined by the user's locale. It helps for auto-formatting while OnBlur (decimal, thousand, separator).
Integer Number Field
Integer Number Field is a specific form element that only accepts whole number inputs. While it can be positive or negative numbers, it just cannot allow separators. It can be used for use cases such as delays and stocks.
While this field has the same optional features as other fields, it also automatically comes with a Stepper Control to allow quick small adjustments. In this field, users can use their keyboard to increase/decrease value.
The valid input range of an Integer Number Field can be set by defining minimum and maximum values. In this case, use helptext to provide information about the range.
Monetary Field
Monetary Field is a specific form element that only accepts numeric inputs. It does allow separators. This field can only be used for monetary use cases such as setting a price or a price reduction.
Like Float Number Field, this field also comes with Prefix features:
Select Prefix: allow users to choose a unit between at least two options.String Prefix: visual help to understand which unit number is required; users cannot change it.
Another customization option is available: currencyDisplay which allows defining which code of the currency is displayed in the field:
'symbol' : $US
'code' : USD
'name' : U.S Dollar
'narrowSymbol' : $
⚠️ Number format and currency are automatically defined by user local.
Number formatting is automatically defined by the user's locale.
Upload Field
Upload Field is a specific form element that allows users to upload a file to the platform.
This field is different from others because users cannot actually enter any kind of text into it. This field can only be used to retrieve a file from users' computers. It can be used for use cases such as providing ID documents, company logos, and product pictures...
File Upload
FileUpload is a component attached to Upload Field. When a file is selected, we display FileUpload component under the button.
If the project allows several files, FileUpload components are stacked.
If the project does not allow several files, the button becomes disabled after selecting one file. If users remove the file by clicking on its "Close icon", then the component comes back to its initial state.
Dropzone
Each project can choose to use the dropzone.
We recommend using it in most cases as it may really simplify the user's experience. However, you will not be able to use it if your form has several Upload Field on a single page, as we cannot know to which dropzone the file is supposed to be attached.
Dropzone comes with error management to give direct feedback to users if files do not comply with defined rules (maximum size, format...)
This component allows users to upload a file from the platform, not to download one. To download any kind of document from the platform, refer to File Download Component, a dedicated component to be used in a form.
Accessibility
Label is not mandatory, as we might need to overstack several fields for a single label. However, this practice should be used sparingly with caution.
In can be overwhelming or difficult for some people to understand how to fill an imput without a label. We recommend defining a label adjacent to the field.
In cases where we overstack several fields for a single label, the gap between each fields should be minimal (16px max).
Content
Label
Keep label copy concise, precise, and clear. Prefer the use of nouns rather than action verbs.
Help text
Help text helps convey extra information or instructions on how to fill a field or explains how the information the user gives will be used by Mirakl.
If you feel you're repeating yourself in the help text, you don't need it.
Placeholder text
Use placeholder text when necessary, as its content disappears while the user writes. The copy you choose for the label and help text should be enough for the user to understand what's expected from them.
Tooltip
Tooltips appear when hovering over the ? icon or a disabled button. Do not communicate critical information in a tooltip; think of it as a "Did you know?" prop.
Key takeaways
Use wisely different features for field customization (placeholder, tooltip, requirement level...)
Use Float Number Field with a prefix for percentages
Use predictable and logically ordered values
Never use Password Field with a placeholder and no label
Never use Monetary field for any other means than money
Create new/custom behavior patterns with form components
Last updated
