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

Floating native

Floating custom

Static native

Static custom

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

Radio-button

Sidebar