UI Lab

A reference of default HTML UI elements. Click, copy, and paste any into your pages.

Text Inputs

Text field
<input type="text" placeholder="Your name">
Textarea (multi-line)
<textarea rows="3" placeholder="Write something..."></textarea>
Email field
<input type="email" placeholder="name@example.com">

Buttons

Standard button
<button>Click me</button>
Disabled button
<button disabled>Can't click</button>

Checkboxes & Radio Buttons

Checkboxes

<label><input type="checkbox"> Option one</label>
Radio buttons (select one)


<label><input type="radio" name="group"> Choice</label>

Select Dropdown

Dropdown menu
<select><option>Option one</option></select>

Sliders & Range

Range slider
<input type="range" min="0" max="100" value="50">
Slider with live value display
50
<input type="range" id="slider"> <span id="value"></span> <script>slider.addEventListener('input', e => value.innerText = e.target.value);</script>

Color & Date Pickers

Color picker
<input type="color" value="#111111">
Date picker
<input type="date">
Number input (with up/down arrows)
<input type="number" min="0" max="10" value="5">

Progress & Meter

Progress bar
70%
<progress value="70" max="100">70%</progress>
Meter (gauge)
60%
<meter value="0.6" min="0" max="1">60%</meter>

Expand / Collapse

Details + Summary (no JS required)
Click to expand

Hidden content appears here. Works without JavaScript.

<details><summary>Click to expand</summary><p>Hidden content</p></details>

CSS-Only Toggle (no JS)

Checkbox toggle that shows/hides content
This content appears when checked. No JavaScript needed.
<input type="checkbox" id="toggle"> <label for="toggle">Show/hide</label> <div>Hidden until checked</div> <style> #toggle:checked + label + div { display: block; } </style>

← Each element works in any browser. Copy the code snippets into your pages.