NoLoJS logo

Input with Dropdown - Number

Native HTML dropdown attached to input element, no CSS or JS required.

Demo

HTML

<!-- `list="quantities"` on the `input` connects to `id="quantities"` on the `datalist` -->
<label for="quantity">Quantity</label>
<input type="number" 
       id="quantity"
       name="quantity"
       list="quantities" />
<datalist id="quantities">
  <option value="1"></option>
  <option value="2"></option>
  <option value="5"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="50"></option>
</datalist>

CSS

No special CSS required.

JS

No JS required.

Baseline

[`datalist`](https://webstatus.dev/features/datalist)

CodePen

See the Pen on CodePen.