Interacting with a Select displays a list of values to choose from. Choosing a value will override any previous selection and close the Select.
Odyssey also supports a Multi-Select variant that allows users to select many values.
To support expected functionality and behaviors, Select relies on the Choices.js library. Odyssey provides fallback styling when Choices.js isn't available.
Odyssey provides support for both single and multi-value Selects.
# Single Select
The default Select allows users to choose a single value from a list of options. Selecting another option will replace the first.
The Multi-Select variant allows users to choose more than one value from the list of options.
Select inputs support the following states: enabled, hover, focus, disabled, optional, and invalid.
Select inputs in their "normal" state are considered enabled. They are ready for user interaction.
Hover states are activated when the user pauses their pointer over the input.
The focus state is a visual affordance that the user has highlighted the input with a pointer, keyboard, or voice.
Disabled inputs are unavailable for interaction and cannot be focused. They can be used when input is disallowed, possibly due to a system state or access restrictions.
The values of disabled inputs will not be submitted.
Odyssey assumes inputs are required by default. Optional inputs should be used to indicate when data is not required for the user to complete a task.
The invalid state is for inputs with incorrect values or values of the wrong format.
When indicating a validation error, please use a Field Error label to indicate the nature of the error. Color alone is not an accessible way to signify that something has gone wrong.
Selects are most useful when users are choosing between 7-15 options. For smaller sets, Radio Buttons are more effective. For larger sets, a Text Input with autocompletion may be a better fit.
Selects perform better when the options are familiar to the user. If a user may be unfamiliar with their options or need to compare them, use Radio Buttons.
Select inputs should not have a default selected unless a majority of users will be choosing it.
# Option groups
Options may be grouped within the Select list to help guide users. When doing this, consider that Choices will ignore any ungrouped items.