Yammer Teams Slack email

Select

Selects allow users to select an option through a list

Example

Use only the tag <nj-select></nj-select> if you choose the Web Component initialization method with Angular, React or VueJs frameworks.
keyboard_arrow_down 
<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

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

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