Select

Selects allow users to select an option through a list

Example

Use only the tag <nj-select></nj-select> with the version 3.1 or higher and only in Angular, React or VueJs frameworks.
If you are using an older version or any JavaScript frameworks, do not use this tag and keep only the HTML inside.

Example select

<div class="nj-form-group">
  <nj-select>
    <select class="nj-form-control" id="exampleSelect">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <label for="exampleSelect" class="nj-label-static">Example select</label>
    <i class="material-icons">keyboard_arrow_down</i>
  </nj-select>
</div>

Option and optgroup

Example select

<div class="nj-form-group">
    <nj-select>
      <select class="nj-form-control" id="exampleSelect2">
        <option selected disabled>Option selected disabled</option>
        <optgroup label="Odd">
          <option value="2">1</option>
          <option value="4">3</option>
          <option value="6">5</option>
        </optgroup>
        <optgroup label="Even">
          <option value="2">2</option>
          <option value="4">4</option>
          <option value="6">6</option>
        </optgroup>
      </select>
      <label for="exampleSelect2" class="nj-label-static">Example select</label>
      <i class="material-icons">keyboard_arrow_down</i>
    </nj-select>
  </div>

Disable state

Example select

<div class="nj-form-group">
  <nj-select>
    <select class="nj-form-control" id="exampleSelect3" disabled>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <label for="exampleSelect3" class="nj-label-static">Example select</label>
    <i class="material-icons">keyboard_arrow_down</i>
  </nj-select>
</div>