Select
Select gives users the ability to select a single item from a list of options.
Usage
- A select is usually used in forms. It's best utilized in a case when a user has more than four options to choose from.
- Try to select a default value. If there's no logical default, try to use a clear placeholder text.
- When a user has to make a single selection from less than 4 options, use the Radio or Choice (Radio) component.
Anatomy
A. Label
The text label associated with the Select.
B. Optional label
Indicates if the input is optional. The optionalLabel also removes the required attribute from the input.
C. Field
The container in which a user's selected data is shown.
D. Action
Mostly a link that can refer more information on the subject.
E. Value
The content the user has entered into the field.
F. Message
Give additional information to the user.
G. Icon
The visual representation of the selection control.
Required vs optional
Rather than using an asterisk (*) to indicate required form inputs, Chameleon treats all form elements as required by default and displays an optionalLabel for fields that are optional.
Do’s & Don’ts
Sort the list of options in a way that makes sense to the user. Numerically, alphabetically, most selected, ...