Select
Input type select gives users the ability to choose a single item from a list of options. Usually, you can use it in forms or inline edit.
- Types
- States
- Variations
Example
Fluid provides two select types:
native
custom
Native
<form>
<div class="nj-form-item nj-form-item--select">
<div class="nj-form-item__field-wrapper">
<select class="nj-form-item__field" id="exampleSelect">
<optgroup label="Group 1">
<option>Item 1</option>
<option>Item 2</option>
</optgroup>
<optgroup label="Group 2">
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</optgroup>
</select>
<label for="exampleSelect" class="nj-form-item__label">Example</label>
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
</div>
</div>
</form>
Custom
The custom
select relies on nj-list-group
.
<form>
<div class="nj-form-item nj-form-item--select nj-form-item--custom-list">
<div class="nj-form-item__field-wrapper">
<input class="nj-form-item__field" id="exampleSelectCustom" placeholder=" " readonly aria-hidden="true" tabindex="-1" />
<label for="exampleSelectCustom" class="nj-form-item__label">Example</label>
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
<button
class="nj-form-item__custom-list-button"
type="button" aria-label="Example - Select a value"
aria-haspopup="listbox"
aria-expanded="false"
role="combobox"
></button>
<ul
role="listbox"
hidden
aria-label="Example - Use up and down arrows and Enter to select a value"
class="nj-form-item__list nj-list-group nj-list-group--no-border nj-list-group--sm"
tabindex="-1"
>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item" data-value="fr">France</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item" data-value="it">Italy</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Belgium</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">United Kingdom</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Spain</li>
</ul>
</div>
</div>
</form>
Attribute | Description |
---|---|
data-value |
Allow you to customize the value of the item selected (optionnal) |
Required and disabled state
You can add the required
html attribute to specify that a select the mandatory for submitting the form.
To disable an input, use the disabled
html attribute on the input element coupled with the .nj-form-item--disabled
class on the .nj-form-item
wrapper.
<form style="display: flex; flex-direction: column; gap: 24px;">
<div class="nj-form-item nj-form-item--select">
<div class="nj-form-item__field-wrapper">
<select class="nj-form-item__field" id="exampleSelect2" required>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select>
<label for="exampleSelect2" class="nj-form-item__label">Example</label>
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
</div>
</div>
<div class="nj-form-item nj-form-item--select nj-form-item--disabled">
<div class="nj-form-item__field-wrapper">
<select class="nj-form-item__field" id="exampleSelectDisabled" disabled>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select>
<label for="exampleSelectDisabled" class="nj-form-item__label">Disabled</label>
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
</div>
</div>
</form>
Error state
You can trigger the error style with the .nj-form-item--error
.
<form class="row">
<div class="col-md-6">
<div class="nj-form-item nj-form-item--select nj-form-item--error">
<div class="nj-form-item__field-wrapper">
<select class="nj-form-item__field" id="exampleSelectError" aria-describedby="select-error" aria-invalid="true">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select>
<label for="exampleSelectError" class="nj-form-item__label">Error</label>
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
</div>
<p class="nj-form-item__subscript" id="select-error">Error</p>
</div>
</div>
<div class="col-md-6">
<div class="nj-form-item nj-form-item--error nj-form-item--select nj-form-item--custom-list">
<div class="nj-form-item__field-wrapper">
<input class="nj-form-item__field" id="exampleSelectCustom5" placeholder=" " readonly aria-hidden="true" tabindex="-1" />
<label for="exampleSelectCustom5" class="nj-form-item__label">Example</label>
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
<button
class="nj-form-item__custom-list-button"
type="button" aria-label="Example - Select a value"
aria-haspopup="listbox"
aria-expanded="false"
role="combobox"
></button>
<ul class="nj-form-item__list nj-list-group nj-list-group--no-border nj-list-group--sm" role="listbox" hidden tabindex="-1">
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item" data-value="fr">France</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item" data-value="it">Italy</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Belgium</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">United Kingdom</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Spain</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item" data-value="fr">France</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item" data-value="it">Italy</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Belgium</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">United Kingdom</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Spain</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item" data-value="fr">France</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item" data-value="it">Italy</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Belgium</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">United Kingdom</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Spain</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item" data-value="fr">France</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item" data-value="it">Italy</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Belgium</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">United Kingdom</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Spain</li>
</ul>
</div>
<div class="nj-form-item__subscript">Error</div>
</div>
</div>
</form>
Label position
There are two variations of our inputs : Floating (default) and Static.
<form style="display: flex; flex-direction: column; gap: 24px;">
<div class="row">
<div class="col-md-6">
<div class="nj-form-item nj-form-item--select">
<div class="nj-form-item__field-wrapper">
<select class="nj-form-item__field" id="exampleSelectDefault">
<optgroup label="Group 1">
<option>Item 1</option>
<option>Item 2</option>
</optgroup>
<optgroup label="Group 2">
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</optgroup>
</select>
<label for="exampleSelectDefault" class="nj-form-item__label">Floating native</label>
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="nj-form-item nj-form-item--select nj-form-item--custom-list">
<div class="nj-form-item__field-wrapper">
<input class="nj-form-item__field" id="exampleSelectCustom" placeholder=" " readonly aria-hidden="true" tabindex="-1" />
<label for="exampleSelectCustom" class="nj-form-item__label">Floating custom</label>
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
<button
class="nj-form-item__custom-list-button"
type="button" aria-label="Example - Select a value"
aria-haspopup="listbox"
aria-expanded="false"
role="combobox"
></button>
<ul
role="listbox"
hidden
aria-label="Example - Use up and down arrows and Enter to select a value"
class="nj-form-item__list nj-list-group nj-list-group--no-border nj-list-group--sm"
tabindex="-1"
>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item" data-value="fr">France</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item" data-value="it">Italy</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Belgium</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">United Kingdom</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Spain</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="nj-form-item nj-form-item--select nj-form-item--static">
<div class="nj-form-item__field-wrapper">
<select class="nj-form-item__field" id="exampleSelectStatic">
<optgroup label="Group 1">
<option>Item 1</option>
<option>Item 2</option>
</optgroup>
<optgroup label="Group 2">
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</optgroup>
</select>
<label for="exampleSelectStatic" class="nj-form-item__label">Static native</label>
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="nj-form-item nj-form-item--static nj-form-item--select nj-form-item--custom-list">
<div class="nj-form-item__field-wrapper">
<input class="nj-form-item__field" id="exampleSelect" placeholder="Select" readonly aria-hidden="true" tabindex="-1" />
<label for="exampleSelect" class="nj-form-item__label">Static custom</label>
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
<button
class="nj-form-item__custom-list-button"
type="button" aria-label="Example - Select a value"
aria-haspopup="listbox"
aria-expanded="false"
role="combobox"
></button>
<ul class="nj-form-item__list nj-list-group nj-list-group--no-border nj-list-group--sm" role="listbox" hidden tabindex="-1">
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item" data-value="fr">France</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item" data-value="it">Italy</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Belgium</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">United Kingdom</li>
<li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Spain</li>
</ul>
</div>
</div>
</div>
</div>
</form>
Size modifier
Need larger or smaller selects?
Use the .nj-form-item--sm
, .nj-form-item--lg
or .nj-form-item--xl
classes for additional sizes.
<form class="row">
<div class="col-md-3">
<div class="nj-form-item nj-form-item--select nj-form-item--sm">
<div class="nj-form-item__field-wrapper">
<select class="nj-form-item__field" id="exampleSelectSm">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select>
<label for="exampleSelectSm" class="nj-form-item__label">Example SM</label>
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="nj-form-item nj-form-item--select">
<div class="nj-form-item__field-wrapper">
<select class="nj-form-item__field" id="exampleSelect">
<optgroup label="Group 1">
<option>Item 1</option>
<option>Item 2</option>
</optgroup>
<optgroup label="Group 2">
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</optgroup>
</select>
<label for="exampleSelect" class="nj-form-item__label">Default</label>
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="nj-form-item nj-form-item--select nj-form-item--lg">
<div class="nj-form-item__field-wrapper">
<select class="nj-form-item__field" id="exampleSelectLG">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select>
<label for="exampleSelectLG" class="nj-form-item__label">Example LG</label>
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="nj-form-item nj-form-item--select nj-form-item--xl">
<div class="nj-form-item__field-wrapper">
<select class="nj-form-item__field" id="exampleSelectXL">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select>
<label for="exampleSelectXL" class="nj-form-item__label">Example XL</label>
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
</div>
</div>
</div>
</form>
Subscript element
You can add an information line below the select with the .nj-form-item__subscript
element.
The subscript text gives a context on the entry of a field. It could be an instruction, a confirmation or an error.
Don’t forget to give it an id and reference it in the select
’s aria-describedby=”id”
<form>
<div class="nj-form-item nj-form-item--select">
<div class="nj-form-item__field-wrapper">
<select class="nj-form-item__field" id="exampleSelectHint" aria-describedby="select-hint">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select>
<label for="exampleSelectHint" class="nj-form-item__label">Hint</label>
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
</div>
<p class="nj-form-item__subscript" id="select-hint">Hint</p>
</div>
</form>
Option and optgroup
To add optgroup, wrap your option
in an optgroup
and assign it a label
.
<form>
<div class="nj-form-item nj-form-item--select">
<div class="nj-form-item__field-wrapper">
<select class="nj-form-item__field" id="exampleSelect">
<optgroup label="Group 1">
<option>Item 1</option>
<option>Item 2</option>
</optgroup>
<optgroup label="Group 2">
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</optgroup>
</select>
<label for="exampleSelect" class="nj-form-item__label">Example</label>
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
</div>
</div>
</form>