Select
Select is a compound consisting of a select field and Listbox. It allows users to select one or more options.
1. Select vs Listbox
Select components contains select field and listbox.
A listbox can be used without a select field, but a select field can’t be used without a listbox.
2. Alike components
Select can be confused with components like input field, radio button, or Listbox under certain usage.
| Select | Input field | Radio button | |
|---|---|---|---|
| Is the result searchable | Yes | No | No |
| Has options | Yes | No | Yes |
| #of options to choose from | >= 5 options | N/A | < 5 options |
3. How to write copy
3.1 Label
Label copy should be short. Users only scan the information.
Do
Use concise and informational language. The label should be short.
Don't
Don’t write the whole sentence. If needs explanation, use helper text or a tooltip.
Do
Use sentence case.
Don't
Don’t use all caps.
3.2 Helper text
Helper text should add context to the select.
Do
Add context around input’s impact.
Don't
Don’t explain the label. Use tooltips for it.
4. When to hide labels
Label property is required. However, you can hide it in certain instances, such as:
- When a title in the form indicates the purpose of the select field, labels can be hidden.
- When the labels become repetitive, the repetitive ones can be hidden.
Use the "hide label" flag to hide the label.
5. Diabled vs. read-only
Use read-only as default to indicate a field is not editable; Use disabled when necessary.
The major difference between disabled and read-only is accessibility and form submit behavior.
- Fields marked as readonly are collected along with all of the normal field values in a form submission whereas Fields marked as disabled are ignored. More detailshere