NoLoJS logo

Input with Dropdown - Time

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

Demo

HTML

<!-- `list="appointments"` on the `input` connects to `id="appointments"` on the `datalist` -->
<label for="appointment">Appointment</label>
<input type="time" 
       id="appointment"
       name="appointment"
       list="appointments" />
<datalist id="appointments">
  <option value="10:00">Morning</option>
  <option value="13:00">Afternoon</option>
  <option value="18:00">Evening</option>
</datalist>

CSS

No special CSS required.

JS

No JS required.

Baseline

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

CodePen

See the Pen on CodePen.