Fields
Fields allow users to enter an input. They will provide answers we cannot foresee unlike pickers.
Last updated
Was this helpful?
Fields allow users to enter an input. They will provide answers we cannot foresee unlike pickers.
Last updated
Was this helpful?
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.
In the following tabs, you will find all informations for fields containing textual inputs.
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.
In the following tabs, you will find all informations for fields containing inputs with numbers.
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.
Do not use this component for monetary information, use dedicated Monetary Field
Use Prefix props (Select or String Prefix) to indicate the expected unit for user input.
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).
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...
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.
For a clear form layout, follow these simple design rules:
Place inputs in a vertical sequence, each stretching across the full panel width for a clean look.
If you're aligning inputs side-by-side, leave a 16px gap between them to prevent clutter.
Similarly, when stacking inputs vertically under a single label, keep a 16px space for clear separation.
Use a noun, no preposition/article (my/a/the), and no action verb.
Prefer a help text over a tooltip to add extra details, and explain how to fill the field or its purpose.
If you feel you're repeating yourself in the help text, you don't need it.
As they disappear when you start typing, refrain from using placeholders if possible. Rely on a clear label and help text.
Tooltip appears when hovering the ? icon or a disabled button. They are not used to communicate critical information but to provide additional information.
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
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.
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 , a dedicated component to be used in a form.
