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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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