Input Components

The most basic input — accepts any text value.

<input type="text" placeholder="Enter text">

Validates email format on submission automatically.

<input type="email" placeholder="you@example.com">

Masks characters as the user types for secure entry.

<input type="password" placeholder="••••••••">

Opens a native date picker in supported browsers.

<input type="date">

Opens a native time picker for hour/minute selection.

<input type="time">

Lets users browse and select files from their device.

<input type="file">

A draggable slider for picking a numeric value within a range.

<input type="range" min="0" max="100" value="60">

Numeric input with a step attribute — increments by 0.5.

<input type="number" placeholder="0.0" step="0.5">

Opens a native color picker — great for theme customization.

<input type="color" value="#eb6835">

Used for multi-select boolean options.

<label><input type="checkbox"> Accept terms</label>
<label><input type="checkbox"> Subscribe</label>

Used for single-choice selection from a group.

<label><input type="radio" name="opt"> Option 1</label>
<label><input type="radio" name="opt"> Option 2</label>

Multi-line text input for longer content like messages.

<textarea rows="4" placeholder="Enter message"></textarea>

Dropdown for selecting one option from a list.

<select>
  <option>Select</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

A search field with a native clear button in supported browsers.

<input type="search" placeholder="Search the catalog">

Validates web addresses and helps users enter full links safely.

<input type="url" placeholder="https://example.com">

Optimized for phone number entry and mobile keypad support.

<input type="tel" placeholder="(555) 123-4567">

Combines a text input with suggested values in a native dropdown.

<input list="browser-list" placeholder="Choose a browser">
<datalist id="browser-list">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

A split code entry pattern used for verification and login flows.

<div class="otp-input-group">
  <input type="text" maxlength="1" inputmode="numeric">
  <input type="text" maxlength="1" inputmode="numeric">
  <input type="text" maxlength="1" inputmode="numeric">
  <input type="text" maxlength="1" inputmode="numeric">
</div>

A disabled input — cannot be interacted with or submitted.

<input type="text" placeholder="Disabled" disabled>

Readonly — visible and selectable but not editable.

<input type="text" value="Readonly value" readonly>

Blocks form submission if this field is left empty.

<input type="email" placeholder="Email" required>

Restricts the character count between a min and max value.

<input type="text" minlength="3" maxlength="10">

Validates input against a regex pattern on submit.

<input type="text" pattern="[A-Z]+" placeholder="Uppercase only">