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
Select inputs are distinguished from text input fields with an actionable down arrow to the right side of the element. They implement the Messaging and Validation mixins, and provide mechanisms for getting and setting their value.
The following options may be passed when using new Spark.SelectInput(el, {}); or $(el).sparkSelectInput({});:
| Name | Type | Default | Description |
|---|---|---|---|
| validate | function | null | A function to run to validate the state of the input. It should call onValidate with the parameters outlined below. |
| onValidate | function | null | A callback function run after validation has completed. Callback arguments are isValid, newValue, instance. |
| onChange | function | null | A callback function run when the select value changes. Callback arguments are newValue, instance. |
| onFocus | function | null | A callback function run when the select gains focus. Callback arguments are newValue, instance. |
| onBlur | function | null | A callback function run when the select loses focus. Callback arguments are newValue, instance. |
| onKeydown | function | null | A callback function run when a key is pressed. Primarily used to detect selection of options via arrow keys in the Date Select component. Callback arguments are e, newValue, instance. |
| onClick | function | null | A callback function run when the mouse is clicked. Primarily used to detect selection of options in the Date Select component. Callback arguments are e, newValue, instance. |
For all available methods and full API, refer to the component code on Bitbucket.
Default Select 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.