Best Practices

Properties

Mark a Select as optional when it’s sometimes necessary. For example, to inform gender or an industry segment.
When a field is marked as optional, the term (optional) is included by default next to the label.
By default, the term (optional) is included next to the label.
Don’t mark the mandatory fields or include many optional fields in a form.

Write the name of the object that is being listed. For example, use the label Frequency when the options are Daily, Every weekday, Weekly, Monthly, and Every year.
Don’t include redundant words. For example, write Industry as the label instead of Company industry when the page or section already includes Company in its title.
Visually hide the label only when this definition is already present somewhere else. For example, in a form section title or column label.
Use sentence case, but capitalize proper nouns.
Don’t use verbs, personal pronouns, or interrogations.

Write values with similar lengths, up to 25 characters and in a direct language. For example, Daily or Weekly. Use the label and help text to provide additional context when necessary.
Use sentence case, but capitalize proper nouns.
Don’t include redundant words. For example, use only Daily, Weekly, and Monthly instead of Daily frequency, Weekly frequency, and Monthly frequency.
Don’t start options with a verb.
Don’t use periods, commas, or personal pronouns.

The component includes a default placeholder text “Select…” that should not be customized.

When to include: Include it when additional information is necessary besides the label, such as to explain the label and/or how the field value will be used.
How to write: Write a single sentence that is short and direct. Use sentence case, but capitalize proper nouns. Don’t use periods, commas, or include redundant words.
- Explaining the label: Write as if completing the sentence “This is the…”. For example, write for a Frequency field the text “Schedule for updates”.
- Explaining how the value will be used: Write as if completing the sentence “When you fill a value in this field, it…” and start with a verb in the simple present tense. For example, write for a Frequency field the text “Defines when updates will be published”.
- Explaining the label and how the value will be used: Combine the two sentences described in the previous topics and adapt them if necessary. For example, “Schedule for updates that defines when they will be published”.

Width and height: The width of the field should comfortably fit the values, considering localization as well. Don’t customize the height of the field.
Position in a form: Group and sort fields in a logical way, considering user research. Don’t position two fields that are not complementary on the same line and don’t include more than three fields on the same line.
Order of options: Order them by most to least frequently used, simplest to most complex, least to most risky, or in alphabetical order.

Preselect a common or recommended option when this can make the user more efficient and when it isn’t important for the choice to be conscious. Leverage information that the user previously provided to guess the option that should be preselected.
When a recommended option is preselected, add (Recommended) to the end of its label so it can still be identified after edits.

Disable a field only if it becomes enabled in some condition. For example, a field that becomes unavailable when a specific option is chosen in the form.
When the reason why the field is disabled might be unclear, include a ContextualHelp next to the label to explain.

Prevent errors whenever possible. For example, disable incompatible fields or options automatically when an option is selected.
Show the error in a specific field when the user leaves the field or in any field when they attempt to submit the form. For example, when the user removes the focus of an empty mandatory field. Remove the error state of the field as soon as the user modifies its value.
When the field is in an error state, always include an error text. Start with an imperative verb (e.g. Select an option instead of This field is required), don’t use incomplete sentences (e.g. Select an option instead of Select one), and don’t use periods or commas.