Input Components

Modern floating placeholder label effect.

Search bar with integrated icon.

Password field with visibility icon.

Used for pricing and checkout forms.

Useful for skills, labels and categories.

Collect product and service ratings.

International phone number entry.

Displays search suggestions while typing.

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">