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.

React

Angular coming soon

Usage

Label : It indicates the type of information required by the control.
Placeholder : Allows users to know how they should use the field. For example: “Solar panel, wind turbine …”. This is where people enter the text they want to fill in.
Menu : Contains the list of all selectable items. These can be grouped into sub-categories.

In a database, using an input select allows you to enter a precise value. If you want the user to enter a personalized answer, use an input type text instead.

Example

Example select

<div class="nj-form-group">
  <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>
</div>

Option and optgroup

Example select

<div class="nj-form-group">  
  <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>
</div>

Disable state

Example select

<div class="nj-form-group">
  <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>
</div>

Radio-button

Sidebar