Skip Navigation

Select Input

A select input is a form control for selecting a single item from a list of options.

Available in React

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.

Examples

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.

Examples

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.

Your Birthday


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, {});:

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

<div class="spark-mar-t-1">
  <label class="spark-select">
    <select class="spark-select__input"> <!-- This has to be before .spark-label! -->
      <option></option>
      <option>Don't pick this one.</option>
      <option>A decent choice.</option>
      <option>The best option.</option>
    </select>
    <span class="spark-label">Select Option</span>
  </label>
</div>
<div class="spark-mar-t-1">
  <label class="spark-select">
    <select class="spark-select__input"> <!-- This has to be before .spark-label! -->
      <option></option>
      <option>Don't pick this one.</option>
      <option selected>A good choice.</option>
      <option>The best option.</option>
    </select>
    <span class="spark-label">Select Option</span>
  </label>
</div>

<div class="spark-mar-t-1">
  <label class="spark-select">
    <select class="spark-select__input" disabled> <!-- This has to be before .spark-label! -->
      <option></option>
      <option>Don't pick this one.</option>
      <option>A decent choice.</option>
      <option>The best option.</option>
    </select>
    <span class="spark-label">Select Option</span>
  </label>
</div>
<div class="spark-mar-t-1">
  <label class="spark-select">
    <select class="spark-select__input" disabled> <!-- This has to be before .spark-label! -->
      <option></option>
      <option>Don't pick this one.</option>
      <option>A decent choice.</option>
      <option selected>The best option.</option>
    </select>
    <span class="spark-label">Select Option</span>
  </label>
</div>

<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-select');
var selectInstance = new Spark.SelectInput(el);

Select Group

Your Birthday 
<div class="spark-select-group spark-mar-t-1">
  <label class="spark-select">
    <select class="spark-select__input">
      <option></option>
      <option>Jan</option>
      <option>Feb</option>
      <option>Mar</option>
      <option>Apr</option>
      <option>May</option>
      <option>June</option>
      <option>July</option>
      <option>Aug</option>
      <option>Sept</option>
      <option>Oct</option>
      <option>Nov</option>
      <option>Dec</option>
    </select>
    <span class="spark-label">Month</span>
  </label>
  <label class="spark-select">
    <select class="spark-select__input">
      <option></option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
      <option>21</option>
      <option>22</option>
      <option>23</option>
      <option>24</option>
      <option>25</option>
      <option>26</option>
      <option>27</option>
      <option>28</option>
      <option>29</option>
      <option>30</option>
      <option>31</option>
    </select>
    <span class="spark-label">Day</span>
  </label>
  <label class="spark-select">
    <select class="spark-select__input">
      <option></option>
      <option>1967</option>
      <option>1968</option>
      <option>1969</option>
      <option>1970</option>
      <option>1971</option>
      <option>1972</option>
      <option>1973</option>
      <option>1974</option>
      <option>1975</option>
      <option>1976</option>
      <option>1977</option>
      <option>1978</option>
      <option>1979</option>
      <option>1980</option>
      <option>1981</option>
      <option>1982</option>
      <option>1983</option>
      <option>1984</option>
      <option>1985</option>
      <option>1986</option>
      <option>1987</option>
      <option>1988</option>
      <option>1989</option>
      <option>1990</option>
      <option>1991</option>
      <option>1992</option>
      <option>1993</option>
      <option>1994</option>
      <option>1995</option>
      <option>1996</option>
      <option>1997</option>
      <option>1998</option>
      <option>1999</option>
      <option>2000</option>
      <option>2001</option>
      <option>2002</option>
      <option>2003</option>
      <option>2004</option>
      <option>2005</option>
      <option>2006</option>
      <option>2007</option>
      <option>2008</option>
      <option>2009</option>
      <option>2010</option>
      <option>2011</option>
      <option>2012</option>
      <option>2013</option>
      <option>2014</option>
      <option>2015</option>
      <option>2016</option>
    </select>
    <span class="spark-label">Year</span>
  </label>
  <span class="spark-label">Your Birthday</span>
</div>

<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-select');
var selectInstance = new Spark.SelectInput(el);

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.

Right-to-Left Support

<div class="spark-mar-t-1" dir="rtl">
  <label class="spark-select">
    <select class="spark-select__input"> <!-- This has to be before .spark-label! -->
      <option></option>
      <option>אל תבחר את זה</option>
      <option>בחירה הגונה</option>
      <option>האופציה הטובה ביותר</option>
    </select>
    <span class="spark-label">בחר אפשרות</span>
  </label>
</div>

<div class="spark-mar-t-1">
  <label class="spark-select" dir="rtl">
    <select class="spark-select__input"> <!-- This has to be before .spark-label! -->
      <option></option>
      <option>אל תבחר את זה</option>
      <option selected>בחירה הגונה</option>
      <option>האופציה הטובה ביותר</option>
    </select>
    <span class="spark-label">בחר אפשרות</span>
  </label>
</div>

<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-select');
var selectInstance = new Spark.SelectInput(el);