Interactive HTML elements

Every native control in one place.

Text inputs

Each type brings its own keyboard, validation or picker.

<input type="text"> <input type="password" minlength="6"> <input type="email"> <input type="tel"> <input type="url"> <input type="search"> <input type="number" min="0" max="100" step="5"> <input list="browsers">

<textarea>

Date and time

Browsers show a native picker for each of these.

<input type="date"> <input type="time"> <input type="datetime-local"> <input type="month"> <input type="week">

Choices

Checkboxes allow several answers, radio buttons exactly one, and a select works as either.

Checkboxes

<input type="checkbox"> <input type="checkbox" value="news"> <input type="checkbox" value="tips" checked> <input type="checkbox" value="offers">

Radio buttons

<input type="radio" value="free" checked> <input type="radio" value="plus"> <input type="radio" value="team"> <input type="radio" value="legacy" disabled>

<select> <select multiple>Hold Ctrl or Cmd to pick several

Sliders, colors and files

Values update as you drag, pick or choose.

<input type="range"> 40 <input type="color"> #2f5bff <input type="file" multiple>

Progress and meter

Read-only indicators that you drive from script.

<progress> 35%

<meter>

Buttons

Submit validates and sends, reset restores defaults, plain buttons only run script.

Disclosure, dialog and links

Elements that open, expand or navigate without a form.

Details and summary

This content is hidden or shown by the browser, no JavaScript needed.

Another panel

Panels can be grouped with a shared name attribute so only one stays open.

Anchor link

Editable content

Any element becomes editable with the contenteditable attribute.

Click here and type to edit this paragraph.