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 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="exampleSelectNative">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select>
<label for="exampleSelectNative" class="nj-form-item__label">Native select</label>
<i class="nj-form-item__icon material-icons">keyboard_arrow_down</i>
</div>
</div>
</div>
</form>
Custom
The custom
select relies on nj-list-group
.
<form class="row">
<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=" "/>
<label for="exampleSelectCustom" class="nj-form-item__label">Custom select</label>
<div class="nj-form-item__list nj-list-group nj-list-group--no-border nj-list-group--sm">
<button type="button" class="nj-list-group__item" data-value="fr">France</button>
<button type="button" class="nj-list-group__item" data-value="it">Italy</button>
<button type="button" class="nj-list-group__item">Belgium</button>
<button type="button" class="nj-list-group__item">United Kingdom</button>
<button type="button" class="nj-list-group__item">Spain</button>
</div>
<i class="nj-form-item__icon material-icons">keyboard_arrow_down</i>
</div>
</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="exampleSelectRequired" required>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select>
<label for="exampleSelectRequired" class="nj-form-item__label">Required</label>
<i class="nj-form-item__icon material-icons">keyboard_arrow_down</i>
</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>
<i class="nj-form-item__icon material-icons">keyboard_arrow_down</i>
</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">
<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">Label</label>
<i class="nj-form-item__icon material-icons">keyboard_arrow_down</i>
</div>
<div class="nj-form-item__subscript">Error subscript</div>
</div>
</div>
<div class="col-md-6">
<div class="nj-form-item nj-form-item--select nj-form-item--custom-list nj-form-item--error">
<div class="nj-form-item__field-wrapper">
<input class="nj-form-item__field" id="exampleSelectCustomError" placeholder=" "/>
<label for="exampleSelectCustomError" class="nj-form-item__label">Label</label>
<div class="nj-form-item__list nj-list-group nj-list-group--no-border nj-list-group--sm">
<button type="button" class="nj-list-group__item" data-value="fr">France</button>
<button type="button" class="nj-list-group__item" data-value="it">Italy</button>
<button type="button" class="nj-list-group__item">Belgium</button>
<button type="button" class="nj-list-group__item">United Kingdom</button>
<button type="button" class="nj-list-group__item">Spain</button>
</div>
<i class="nj-form-item__icon material-icons">keyboard_arrow_down</i>
</div>
<div class="nj-form-item__subscript">Error subscript</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="exampleSelectNativeFloating">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select>
<label for="exampleSelectNativeFloating" class="nj-form-item__label">Floating label</label>
<i class="nj-form-item__icon material-icons">keyboard_arrow_down</i>
</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="exampleSelectCustomFloating" placeholder=" "/>
<label for="exampleSelectCustomFloating" class="nj-form-item__label">Floating label</label>
<div class="nj-form-item__list nj-list-group nj-list-group--no-border nj-list-group--sm">
<button type="button" class="nj-list-group__item" data-value="fr">France</button>
<button type="button" class="nj-list-group__item" data-value="it">Italy</button>
<button type="button" class="nj-list-group__item">Belgium</button>
<button type="button" class="nj-list-group__item">United Kingdom</button>
<button type="button" class="nj-list-group__item">Spain</button>
</div>
<i class="nj-form-item__icon material-icons">keyboard_arrow_down</i>
</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="exampleSelectNativeStatic">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select>
<label for="exampleSelectNativeStatic" class="nj-form-item__label">Static label</label>
<i class="nj-form-item__icon material-icons">keyboard_arrow_down</i>
</div>
</div>
</div>
<div class="col-md-6">
<div class="nj-form-item nj-form-item--select nj-form-item--custom-list nj-form-item--static">
<div class="nj-form-item__field-wrapper">
<input class="nj-form-item__field" id="exampleSelectCustomStatic" placeholder=" "/>
<label for="exampleSelectCustomStatic" class="nj-form-item__label">Static label</label>
<div class="nj-form-item__list nj-list-group nj-list-group--no-border nj-list-group--sm">
<button type="button" class="nj-list-group__item" data-value="fr">France</button>
<button type="button" class="nj-list-group__item" data-value="it">Italy</button>
<button type="button" class="nj-list-group__item">Belgium</button>
<button type="button" class="nj-list-group__item">United Kingdom</button>
<button type="button" class="nj-list-group__item">Spain</button>
</div>
<i class="nj-form-item__icon material-icons">keyboard_arrow_down</i>
</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">Small</label>
<i class="nj-form-item__icon material-icons">keyboard_arrow_down</i>
</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="exampleSelectDefault">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select>
<label for="exampleSelectDefault" class="nj-form-item__label">Default</label>
<i class="nj-form-item__icon material-icons">keyboard_arrow_down</i>
</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">Large</label>
<i class="nj-form-item__icon material-icons">keyboard_arrow_down</i>
</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">Extra-large</label>
<i class="nj-form-item__icon material-icons">keyboard_arrow_down</i>
</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.
<div class="nj-form-item nj-form-item--select">
<div class="nj-form-item__field-wrapper">
<select class="nj-form-item__field" id="exampleSelectSubscript">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select>
<label for="exampleSelectSubscript" class="nj-form-item__label">With subscript</label>
<i class="nj-form-item__icon material-icons">keyboard_arrow_down</i>
</div>
<div class="nj-form-item__subscript">Subscript</div>
</div>
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="exampleSelectWithOptGroup">
<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="exampleSelectWithOptGroup" class="nj-form-item__label">With optgroup</label>
<i class="nj-form-item__icon material-icons">keyboard_arrow_down</i>
</div>
</div>
</form>