Select Input
A select input is a form control for selecting a single item from a list of options.
Default Select Example
When to Use
- Use a select input when there is a predetermined set of options from which to choose. This will reduce errors when users type in answers.
- Use when there are more than two options and when only a single option can be selected.
When Not to Use
- Do not use a select input if only two options are available or if it is preferable for the user to see the available options. Instead, consider a radio button or toggle.
- Do not use if multiple options can be selected. Consider checkboxes or a multi-select instead.
Variations
- Default Example (shown above)
- Default with Error Example
- Select Group Example
Usage
Prefill a select input when it is likely that a user will select one of the available options.
The collapsed state of the select input is styled to match the size and visual treatment of the other form controls; however, the expanded list of options should use the native control on both desktop and mobile devices.
Variations
Default with Error
Select Group
Select groups are useful for form fields requiring multiple interdependent selections. For example, date selection (day, month, and year). If inputs are not directly related to one another, use independent select inputs.
Developer Notes
Default Select Input
Select inputs are distinguished from text input fields with an actionable down arrow to the right side of the element.
The select input mirrors the validation patterns of a text input. Validation can be performed by hooking into the Spark.SelectInput JavaScript class. When instantiating the class, provide an options object with a callback function set to the onChange key as the second argument. Ex. new Spark.SelectInput(el, {onChange: function(input, val) { }});
The callback function will be passed two arguments: the instance of Spark.SelectInput and the current value of the input. Using the clearMessages, setSuccess, setWarning or setError methods on the Spark.SelectInput instance, you can manipulate which kind of error (if any) is shown. Only one state can be set at any time.
If you don’t wish to or cannot use the Spark.SelectInput JavaScript class, adding data-error="true", data-warning="true" or data-success="true" to .spark-select will affect the color of the select input. Setting the content of .spark-select__message will change the message displayed below the input.
Select Group
A group of select inputs can exist inside the same container. Simply wrap a set of elements with the class of .spark-select in a containing element with a class of .spark-select-group. Create an instance of the Spark.SelectInput helper for each of the inputs.