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

React

Vanilla

Figma

Last updated v5.0.0

Types
- Native and custom
States
- Required and disabled state
- Error state
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">
      <p hidden id="custom-select-instructions-1">Utiliser les flèches HAUT / BAS pour naviguer au sein de la liste de suggestion. Appuyer sur Entrée pour sélectionner une option. Sur des terminaux tactiles, utiliser le balayage pour naviguer et double tap pour sélectionner une option</p>
      <input class="nj-form-item__field" id="exampleSelectCustom" placeholder=" " readonly aria-hidden="true" tabindex="-1" />
      <label for="exampleSelectCustom" class="nj-form-item__label" aria-hidden="true">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"
        aria-describedby="custom-select-instructions-1"
        role="combobox"
      ></button>

      <ul
        role="listbox"
        hidden
        aria-label="Example"
        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 nj-list-group__item--clickable" data-value="fr">France</li>
        <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable" data-value="it">Italy</li>
        <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">Belgium</li>
        <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">United Kingdom</li>
        <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">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.

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">
        <p hidden id="custom-select-instructions-6">Utiliser les flèches HAUT / BAS pour naviguer au sein de la liste de suggestion. Appuyer sur Entrée pour sélectionner une option. Sur des terminaux tactiles, utiliser le balayage pour naviguer et double tap pour sélectionner une option</p>
        <input class="nj-form-item__field" id="exampleSelectCustom5" placeholder=" " readonly aria-hidden="true" tabindex="-1" />
        <label for="exampleSelectCustom5" class="nj-form-item__label" aria-hidden="true">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"
          aria-describedby="custom-select-error custom-select-instructions-6"
          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"
          aria-label="Country list"
        >
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable" data-value="fr">France</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable" data-value="it">Italy</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">Belgium</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">United Kingdom</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">Spain</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable" data-value="fr">France</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable" data-value="it">Italy</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">Belgium</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">United Kingdom</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">Spain</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable" data-value="fr">France</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable" data-value="it">Italy</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">Belgium</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">United Kingdom</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">Spain</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable" data-value="fr">France</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable" data-value="it">Italy</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">Belgium</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">United Kingdom</li>
          <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">Spain</li>
        </ul>
      </div>
      <div class="nj-form-item__subscript" id="custom-select-error">Error</div>
    </div>
  </div>
</form>

Label position

There are two variations of our inputs : Floating (default) and Static.

Floating native

Static native

<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">
          <p hidden id="custom-select-instructions-3">Utiliser les flèches HAUT / BAS pour naviguer au sein de la liste de suggestion. Appuyer sur Entrée pour sélectionner une option. Sur des terminaux tactiles, utiliser le balayage pour naviguer et double tap pour sélectionner une option</p>
          <input class="nj-form-item__field" id="exampleSelect" placeholder="Select" readonly aria-hidden="true" tabindex="-1" />
          <label for="exampleSelect" class="nj-form-item__label" aria-hidden="true">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"
            aria-describedby="custom-select-instructions-3"
            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"
            aria-label="Country list"
          >
            <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable" data-value="fr">France</li>
            <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable" data-value="it">Italy</li>
            <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">Belgium</li>
            <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">United Kingdom</li>
            <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">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">
          <p hidden id="custom-select-instructions-3">Utiliser les flèches HAUT / BAS pour naviguer au sein de la liste de suggestion. Appuyer sur Entrée pour sélectionner une option. Sur des terminaux tactiles, utiliser le balayage pour naviguer et double tap pour sélectionner une option</p>
          <input class="nj-form-item__field" id="exampleSelect" placeholder="Select" readonly aria-hidden="true" tabindex="-1" />
          <label for="exampleSelect" class="nj-form-item__label" aria-hidden="true">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"
            aria-describedby="custom-select-instructions-3"
            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"
            aria-label="Country list"
          >
            <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable" data-value="fr">France</li>
            <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable" data-value="it">Italy</li>
            <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">Belgium</li>
            <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">United Kingdom</li>
            <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item nj-list-group__item--clickable">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>

Radio-button

Sidebar