A select is a control that enables users to select an option from a list of options.
<nve-select>
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select> <nve-select>
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
label Option 1 Option 2 Option 3 message
Installation <script type="module">
import '@nvidia-elements/core/select/define.js';
</script>
<nve-select>
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<script type="module">
import '@nvidia-elements/core/select/define.js';
</script>
<nve-select>
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
nve api.get nve-selectnve api.get nve-select
Many The many option behavior preserves the native select value behavior. The value on the select only reflects the first selected value. To get all selected options check the selected property on each <option> element or the select property selectedOptions.
Many-selection mode allowing users to select many options simultaneously.
<nve-select>
<label>label</label>
<select multiple>
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3" selected>Option 3</option>
<option value="4" selected>Option 4</option>
<option value="5">Option 5</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select> <nve-select>
<label>label</label>
<select multiple>
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3" selected>Option 3</option>
<option value="4" selected>Option 4</option>
<option value="5">Option 5</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
label Option 1 Option 2 Option 3 Option 4 Option 5 message
If the many tags overflow the parent container a simple text label appears instead.
Multi-selection with constrained width to show overflow handling of selected options.
<nve-select style="--width: 250px">
<label>label</label>
<select multiple>
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3" selected>Option 3</option>
<option value="4" selected>Option 4</option>
<option value="5" selected>Option 5</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select> <nve-select style="--width: 250px">
<label>label</label>
<select multiple>
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3" selected>Option 3</option>
<option value="4" selected>Option 4</option>
<option value="5" selected>Option 5</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
label Option 1 Option 2 Option 3 Option 4 Option 5 message
Flat Flat container style for single and multi select, providing a minimal visual treatment.
<div nve-layout="column gap:xl align:stretch">
<nve-select container="flat">
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select container="flat">
<label>multiple</label>
<select multiple>
<option selected value="1">Option 1</option>
<option selected value="2">Option 2</option>
<option selected value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select container="flat">
<label>multiple + size</label>
<select multiple size="5">
<option selected value="1">Option 1</option>
<option selected value="2">Option 2</option>
<option selected value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
</div> <div nve-layout="column gap:xl align:stretch">
<nve-select container="flat">
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select container="flat">
<label>multiple</label>
<select multiple>
<option selected value="1">Option 1</option>
<option selected value="2">Option 2</option>
<option selected value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select container="flat">
<label>multiple + size</label>
<select multiple size="5">
<option selected value="1">Option 1</option>
<option selected value="2">Option 2</option>
<option selected value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
</div>
label Option 1 Option 2 Option 3 message multiple Option 1 Option 2 Option 3 message multiple + size Option 1 Option 2 Option 3 Option 4 Option 5 message
Layout Controls the directional arrangement and spacing behavior of the element's content.
Layout Description vertical Arranges content in a vertical stack with block-level spacing. vertical-inline Arranges content vertically with compact inline spacing for dense layouts. horizontal Arranges content in a horizontal row with block-level spacing. horizontal-inline Arranges content horizontally with compact inline spacing. Vertical Vertical layout showcasing states: default, disabled, success, and error.
<div nve-layout="column gap:lg align:stretch">
<nve-select>
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select>
<label>disabled</label>
<select disabled>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select>
<label>success</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message status="success">message</nve-control-message>
</nve-select>
<nve-select>
<label>error</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message status="error">message</nve-control-message>
</nve-select>
</div> <div nve-layout="column gap:lg align:stretch">
<nve-select>
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select>
<label>disabled</label>
<select disabled>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select>
<label>success</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message status="success">message</nve-control-message>
</nve-select>
<nve-select>
<label>error</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message status="error">message</nve-control-message>
</nve-select>
</div>
label Option 1 Option 2 Option 3 message disabled Option 1 Option 2 Option 3 message success Option 1 Option 2 Option 3 message error Option 1 Option 2 Option 3 message
Horizontal Horizontal layout showcasing states: default, disabled, success, and error.
<div nve-layout="column gap:lg align:stretch">
<nve-select layout="horizontal">
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select layout="horizontal">
<label>disabled</label>
<select disabled>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select layout="horizontal">
<label>success</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message status="success">message</nve-control-message>
</nve-select>
<nve-select layout="horizontal">
<label>error</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message status="error">message</nve-control-message>
</nve-select>
</div> <div nve-layout="column gap:lg align:stretch">
<nve-select layout="horizontal">
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select layout="horizontal">
<label>disabled</label>
<select disabled>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select layout="horizontal">
<label>success</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message status="success">message</nve-control-message>
</nve-select>
<nve-select layout="horizontal">
<label>error</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message status="error">message</nve-control-message>
</nve-select>
</div>
label Option 1 Option 2 Option 3 message disabled Option 1 Option 2 Option 3 message success Option 1 Option 2 Option 3 message error Option 1 Option 2 Option 3 message
Placeholder Placeholder text prompts users to make a selection when no option exists yet.
<nve-select>
<label>label</label>
<select>
<option value selected disabled hidden>Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select> <nve-select>
<label>label</label>
<select>
<option value selected disabled hidden>Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
label Select Option Option 1 Option 2 Option 3 message
Placeholder text in multi-selection mode guides users before they select any options.
<nve-select>
<label>label</label>
<select multiple>
<option value selected disabled hidden>Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select> <nve-select>
<label>label</label>
<select multiple>
<option value selected disabled hidden>Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
label Select Option Option 1 Option 2 Option 3 message
Disabled Disable individual options to prevent selection while keeping them visible.
<nve-select>
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2" disabled>Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select> <nve-select>
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2" disabled>Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
label Option 1 Option 2 Option 3 message
Height Determines the scroll height of selection in open dropdown.
Custom scroll height for dropdown with many options to control vertical space usage.
<div nve-layout="column gap:lg align:stretch">
<nve-select style="--scroll-height: 150px">
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select>
<label>label</label>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
<option>Option 10</option>
<option>Option 11</option>
<option>Option 12</option>
<option>Option 13</option>
<option>Option 14</option>
<option>Option 15</option>
<option>Option 16</option>
<option>Option 17</option>
<option>Option 18</option>
<option>Option 19</option>
<option>Option 20</option>
<option>Option 21</option>
<option>Option 22</option>
<option>Option 23</option>
<option>Option 24</option>
<option>Option 25</option>
<option>Option 26</option>
<option>Option 27</option>
<option>Option 28</option>
<option>Option 29</option>
<option>Option 30</option>
<option>Option 31</option>
<option>Option 32</option>
<option>Option 33</option>
<option>Option 34</option>
<option>Option 35</option>
<option>Option 36</option>
<option>Option 37</option>
<option>Option 38</option>
<option>Option 39</option>
<option>Option 40</option>
<option>Option 41</option>
<option>Option 42</option>
<option>Option 43</option>
<option>Option 44</option>
<option>Option 45</option>
<option>Option 46</option>
<option>Option 47</option>
<option>Option 48</option>
<option>Option 49</option>
<option>Option 50</option>
<option>Option 51</option>
<option>Option 52</option>
<option>Option 53</option>
<option>Option 54</option>
<option>Option 55</option>
<option>Option 56</option>
<option>Option 57</option>
<option>Option 58</option>
<option>Option 59</option>
<option>Option 60</option>
<option>Option 61</option>
<option>Option 62</option>
<option>Option 63</option>
<option>Option 64</option>
<option>Option 65</option>
<option>Option 66</option>
<option>Option 67</option>
<option>Option 68</option>
<option>Option 69</option>
<option>Option 70</option>
<option>Option 71</option>
<option>Option 72</option>
<option>Option 73</option>
<option>Option 74</option>
<option>Option 75</option>
<option>Option 76</option>
<option>Option 77</option>
<option>Option 78</option>
<option>Option 79</option>
<option>Option 80</option>
<option>Option 81</option>
<option>Option 82</option>
<option>Option 83</option>
<option>Option 84</option>
<option>Option 85</option>
<option>Option 86</option>
<option>Option 87</option>
<option>Option 88</option>
<option>Option 89</option>
<option>Option 90</option>
<option>Option 91</option>
<option>Option 92</option>
<option>Option 93</option>
<option>Option 94</option>
<option>Option 95</option>
<option>Option 96</option>
<option>Option 97</option>
<option>Option 98</option>
<option>Option 99</option>
<option>Option 100</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
</div> <div nve-layout="column gap:lg align:stretch">
<nve-select style="--scroll-height: 150px">
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select>
<label>label</label>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
<option>Option 10</option>
<option>Option 11</option>
<option>Option 12</option>
<option>Option 13</option>
<option>Option 14</option>
<option>Option 15</option>
<option>Option 16</option>
<option>Option 17</option>
<option>Option 18</option>
<option>Option 19</option>
<option>Option 20</option>
<option>Option 21</option>
<option>Option 22</option>
<option>Option 23</option>
<option>Option 24</option>
<option>Option 25</option>
<option>Option 26</option>
<option>Option 27</option>
<option>Option 28</option>
<option>Option 29</option>
<option>Option 30</option>
<option>Option 31</option>
<option>Option 32</option>
<option>Option 33</option>
<option>Option 34</option>
<option>Option 35</option>
<option>Option 36</option>
<option>Option 37</option>
<option>Option 38</option>
<option>Option 39</option>
<option>Option 40</option>
<option>Option 41</option>
<option>Option 42</option>
<option>Option 43</option>
<option>Option 44</option>
<option>Option 45</option>
<option>Option 46</option>
<option>Option 47</option>
<option>Option 48</option>
<option>Option 49</option>
<option>Option 50</option>
<option>Option 51</option>
<option>Option 52</option>
<option>Option 53</option>
<option>Option 54</option>
<option>Option 55</option>
<option>Option 56</option>
<option>Option 57</option>
<option>Option 58</option>
<option>Option 59</option>
<option>Option 60</option>
<option>Option 61</option>
<option>Option 62</option>
<option>Option 63</option>
<option>Option 64</option>
<option>Option 65</option>
<option>Option 66</option>
<option>Option 67</option>
<option>Option 68</option>
<option>Option 69</option>
<option>Option 70</option>
<option>Option 71</option>
<option>Option 72</option>
<option>Option 73</option>
<option>Option 74</option>
<option>Option 75</option>
<option>Option 76</option>
<option>Option 77</option>
<option>Option 78</option>
<option>Option 79</option>
<option>Option 80</option>
<option>Option 81</option>
<option>Option 82</option>
<option>Option 83</option>
<option>Option 84</option>
<option>Option 85</option>
<option>Option 86</option>
<option>Option 87</option>
<option>Option 88</option>
<option>Option 89</option>
<option>Option 90</option>
<option>Option 91</option>
<option>Option 92</option>
<option>Option 93</option>
<option>Option 94</option>
<option>Option 95</option>
<option>Option 96</option>
<option>Option 97</option>
<option>Option 98</option>
<option>Option 99</option>
<option>Option 100</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
</div>
label Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7 Option 8 Option 9 Option 10 message label Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7 Option 8 Option 9 Option 10 Option 11 Option 12 Option 13 Option 14 Option 15 Option 16 Option 17 Option 18 Option 19 Option 20 Option 21 Option 22 Option 23 Option 24 Option 25 Option 26 Option 27 Option 28 Option 29 Option 30 Option 31 Option 32 Option 33 Option 34 Option 35 Option 36 Option 37 Option 38 Option 39 Option 40 Option 41 Option 42 Option 43 Option 44 Option 45 Option 46 Option 47 Option 48 Option 49 Option 50 Option 51 Option 52 Option 53 Option 54 Option 55 Option 56 Option 57 Option 58 Option 59 Option 60 Option 61 Option 62 Option 63 Option 64 Option 65 Option 66 Option 67 Option 68 Option 69 Option 70 Option 71 Option 72 Option 73 Option 74 Option 75 Option 76 Option 77 Option 78 Option 79 Option 80 Option 81 Option 82 Option 83 Option 84 Option 85 Option 86 Option 87 Option 88 Option 89 Option 90 Option 91 Option 92 Option 93 Option 94 Option 95 Option 96 Option 97 Option 98 Option 99 Option 100 message
Size Enables size attribute on the select element. This creates a inline selection at the defined item height.
Size attribute controls the number of visible options without scrolling.
<div nve-layout="column gap:xl">
<nve-select>
<label>label</label>
<select size="5">
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select>
<label>label</label>
<select size="3">
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
</div> <div nve-layout="column gap:xl">
<nve-select>
<label>label</label>
<select size="5">
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select>
<label>label</label>
<select size="3">
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
</div>
label Option 1 Option 2 Option 3 Option 4 Option 5 message label Option 1 Option 2 Option 3 Option 4 Option 5 message
Prefix Select with a prefix button to provide extra context or categorization.
<nve-select>
<nve-button container="flat" readonly>location</nve-button>
<select aria-label="location">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</nve-select> <nve-select>
<nve-button container="flat" readonly>location</nve-button>
<select aria-label="location">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</nve-select>
location Option 1 Option 2 Option 3
Fit Content Sets the input to match native default content block
FitContent Description true false Select width adjusts to fit the longest option in both vertical and horizontal layouts.
<div nve-layout="column gap:lg">
<nve-select fit-content>
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 1234</option>
<option value="3">Option 1234567809</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select fit-content layout="horizontal">
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 1234</option>
<option value="3">Option 1234567809</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
</div> <div nve-layout="column gap:lg">
<nve-select fit-content>
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 1234</option>
<option value="3">Option 1234567809</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-select fit-content layout="horizontal">
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 1234</option>
<option value="3">Option 1234567809</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
</div>
label Option 1 Option 1234 Option 1234567809 message label Option 1 Option 1234 Option 1234567809 message
Fit Text Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select)
FitText Description true false Select width dynamically adjusts to fit the currently selected option text.
<nve-select fit-text>
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 1234</option>
<option value="3">Option 1234567809</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select> <nve-select fit-text>
<label>label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 1234</option>
<option value="3">Option 1234567809</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
label Option 1 Option 1234 Option 1234567809 message
Performance test for select element with 1000 options
<nve-select id="performance-select">
<label>1000 options</label>
<select></select>
</nve-select>
<script type="module">
const select = document.querySelector("#performance-select select");
const options = new Array(1000).fill("").map((_, i) => {
const option = document.createElement("option");
option.value = i;
option.textContent = i + " item";
return option;
});
select.append(...options);
</script> <nve-select id="performance-select">
<label>1000 options</label>
<select></select>
</nve-select>
<script type="module">
const select = document.querySelector("#performance-select select");
const options = new Array(1000).fill("").map((_, i) => {
const option = document.createElement("option");
option.value = i;
option.textContent = i + " item";
return option;
});
select.append(...options);
</script>
1000 options
Release Status All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release Docs Preview API Documentation Fully Themeable
beta Robust unit test coverages Passed API Review Passed Designer VQA Review Included in library package stable No known outstanding AA WCAG issues No known outstanding performance issues Adapts to different screen/container sizes No breaking API changes for at least 90 days