Teams help

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.

angular logo Angularopen_in_new
react logo Reactopen_in_new
javascript logo Vanillaopen_in_new
angular logo Figmaopen_in_new

Last updated v5.0.0

Example

Fluid provides two select types:

  • native
  • custom

Native

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

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

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

keyboard_arrow_down
Error subscript
keyboard_arrow_down
Error subscript
<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.

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

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

keyboard_arrow_down
Subscript
<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.

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

Radio-button

Sidebar

arrow_forward_ios