Select Input
A select input is a form control for selecting a single item from a list of options.
Default Select Example
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.