input

The most versatile form element, accepting text, numbers, dates, files, and more through the type attribute. Always pair with a label for accessibility.

Input Type Overview

Category Types Purpose
Text text, email, password, url, tel, search Single-line text input
Numeric number, range Numeric values with constraints
Date/Time date, time, datetime-local, month, week Temporal values with pickers
Selection checkbox, radio Boolean or mutually exclusive choices
Other file, color, hidden Specialized inputs

Text Input Types

type="text"

Default single-line text input. Use for names, titles, and general text.

type="email"

Email address with built-in validation. Mobile keyboards show @ symbol.

type="password"

Masked text input. Use autocomplete to distinguish new vs current passwords.

type="url"

URL input with validation. Mobile keyboards show common URL characters.

type="tel"

Telephone number. Shows numeric keyboard on mobile but allows any characters.

type="search"

Search input with clear button in some browsers.

Code

<input type="text" placeholder="Name" autocomplete="name" /> <input type="email" placeholder="Email" autocomplete="email" /> <input type="password" autocomplete="current-password" /> <input type="url" placeholder="https://" /> <input type="tel" placeholder="Phone" autocomplete="tel" /> <input type="search" placeholder="Search..." />

Numeric Input Types

type="number"

Numeric input with increment/decrement buttons. Use min, max, and step.

type="range"

Slider for selecting a value within a range.

Code

<input type="number" min="1" max="99" step="1" value="1" /> <input type="number" min="0" step="0.01" value="9.99" /> <input type="range" min="0" max="100" value="50" />

Date and Time Input Types

Native date/time pickers vary by browser. Consider progressive enhancement.

type="date"

type="time"

type="datetime-local"

type="month"

type="week"

With Constraints

Code

<input type="date" /> <input type="time" /> <input type="datetime-local" /> <input type="month" /> <input type="week" /> <!-- With date constraints --> <input type="date" min="2024-01-01" max="2024-12-31" />

Checkbox and Radio Inputs

type="checkbox"

Boolean selection. Can be checked or unchecked independently.

Indeterminate Checkbox

Set via JavaScript for "partially selected" states (e.g., select all).

type="radio"

Mutually exclusive selection within a group (same name). Wrap in fieldset for accessibility.

Shipping Method

Code

<!-- Checkbox --> <label> <input type="checkbox" name="subscribe" /> Subscribe to newsletter </label> <!-- Radio group (wrap in fieldset) --> <fieldset> <legend>Select size</legend> <label> <input type="radio" name="size" value="small" /> Small </label> <label> <input type="radio" name="size" value="medium" checked /> Medium </label> <label> <input type="radio" name="size" value="large" /> Large </label> </fieldset>

Other Input Types

type="file"

File upload. Use accept to restrict file types and multiple for multiple files.

PDF, DOC, or DOCX files only Select multiple images

type="color"

Color picker. Returns hex value.

type="hidden"

Invisible form data. Used for tokens, IDs, or tracking.

<input type="hidden" name="csrf_token" value="abc123" /> <input type="hidden" name="user_id" value="42" />

Code

<input type="file" accept=".pdf,.doc" /> <input type="file" accept="image/*" multiple /> <input type="color" value="#4a90d9" /> <input type="hidden" name="token" value="..." />

Input States

Disabled

Prevents interaction. Value not submitted with form.

Read-only

Prevents editing but allows selection. Value is submitted with form.

Code

<input type="text" disabled value="Cannot edit" /> <input type="text" readonly value="Can select but not edit" />

Validation States

Required

Field must have a value before form submission.

Invalid State

Shown when validation fails. Use aria-invalid="true" for explicit invalid styling.

Please enter a valid email address

Pattern Validation

Use regex patterns for custom validation.

Letters, numbers, and underscores only

Min/Max Length

Validation Attributes

Attribute Purpose Example
required Field must have a value <input required />
minlength Minimum character count minlength="2"
maxlength Maximum character count maxlength="100"
min Minimum numeric/date value min="0"
max Maximum numeric/date value max="100"
step Increment for numeric values step="0.01"
pattern Regex pattern for validation pattern="[A-Za-z]+"
type Built-in validation (email, url) type="email"

With Datalist

Add autocomplete suggestions using datalist.

Code

<input type="text" list="browsers" /> <datalist id="browsers"> <option value="Chrome"></option> <option value="Firefox"></option> </datalist>

With form-field

Use the form-field custom element for CSS-only validation feedback.

Enter a valid email address At least 8 characters required

Autocomplete Attribute

Help browsers autofill forms correctly with specific autocomplete values.

Field Type Autocomplete Value
Full name name
Email email
Phone tel
Street address street-address
City address-level2
State/Province address-level1
Postal code postal-code
Country country-name
Credit card number cc-number
Current password current-password
New password new-password
One-time code one-time-code

Code

<input type="text" name="name" autocomplete="name" /> <input type="email" name="email" autocomplete="email" /> <input type="password" autocomplete="current-password" /> <input type="password" autocomplete="new-password" />

Toggle Switch (data-switch)

Add data-switch to a checkbox for on/off toggle switch styling. Uses CSS appearance: none with a sliding knob. JS adds role="switch" for screen readers.

<!-- Small --> <label> <input type="checkbox" data-switch="sm" name="compact"> Compact mode </label> <!-- Default --> <label> <input type="checkbox" data-switch name="default"> Default size </label> <!-- Large --> <label> <input type="checkbox" data-switch="lg" name="feature"> Large switch </label>
Attribute Values Description
data-switch "", "sm", "lg" Enable switch styling with optional size variant.

Password Strength (data-strength)

Add data-strength and data-rules to a password input inside <form-field> to show a real-time strength meter and rules checklist. Works alongside the existing password show/hide toggle.

<form-field> <label for="pw">Password</label> <input type="password" id="pw" data-strength data-rules="length:8,uppercase,lowercase,number,special" placeholder="Create a strong password" autocomplete="new-password" /> </form-field>
Attribute Description
data-strength Enable strength meter and rules checklist.
data-rules Comma-separated rules: length:N, uppercase, lowercase, number, special.

Strength Levels

  • Weak — Less than 40% of rules met
  • Fair — 40–74% of rules met
  • Good — 75–99% of rules met
  • Strong — All rules met

Range Enhancement (data-range)

Add data-range to a range input for cross-browser styled track and thumb. Add data-bubble for a floating value display. Pair with <datalist> for tick labels.

<input type="range" min="0" max="1000" step="100" list="prices" data-range data-bubble data-prefix="$"> <datalist id="prices"> <option value="0" label="$0"> <option value="500" label="$500"> <option value="1000" label="$1K"> </datalist>
Attribute Description
data-range Enable cross-browser track/thumb styling and fill.
data-bubble Show floating value bubble above the thumb.
data-prefix Text before the value (e.g., "$").
data-suffix Text after the value (e.g., "%", "°F").

File Upload Zone (data-upload)

Add data-upload to a file input to wrap it in a drag-and-drop zone with file list display.

<input type="file" data-upload accept=".pdf,.doc" multiple>
Attribute Description
data-upload Enable drop zone enhancement on a file input.

The native accept and multiple attributes work as normal. Without JS, the standard file input is shown.

Input Masking (data-mask)

Add data-mask to a text input to format the value as the user types. Preset masks handle common patterns; use data-mask="custom" with data-pattern for arbitrary formats.

<!-- Preset masks --> <input type="text" data-mask="phone" placeholder="(555) 123-4567"> <input type="text" data-mask="credit-card" placeholder="1234 5678 9012 3456"> <input type="text" data-mask="date" placeholder="MM/DD/YYYY"> <input type="text" data-mask="ssn" placeholder="123-45-6789"> <input type="text" data-mask="zip" placeholder="12345"> <!-- Custom mask: # = digit, A = letter, * = any --> <input type="text" data-mask="custom" data-pattern="AA-####" placeholder="AB-1234">

Preset Masks

ValuePatternExample
phone(###) ###-####(555) 123-4567
credit-card#### #### #### ####1234 5678 9012 3456
date##/##/####01/15/2026
ssn###-##-####123-45-6789
zip#####90210

Custom Mask Tokens

TokenAccepts
#Any digit (0-9)
AAny letter (a-z, A-Z)
*Any alphanumeric character

Attributes

AttributeDescription
data-maskMask type: phone, credit-card, date, ssn, zip, or custom.
data-patternCustom pattern string when data-mask="custom".

Behavior

  • Auto-sets inputmode="numeric" for digit-only masks
  • Auto-sets maxlength from the pattern length
  • Stores the unformatted value in dataset.rawValue for form processing
  • Without JS, the input works as a standard text field

Range Markers (data-markers)

Add data-markers to a data-range input to display tick marks at each step value. Combines with data-bubble and <datalist> labels.

<input type="range" min="1" max="5" step="1" value="3" data-range data-bubble data-markers>
Attribute Description
data-markers Show tick marks at each step position along the track.

Toggle Tags (data-toggle-tags)

Wrap checkboxes in a <fieldset data-toggle-tags> for pill-chip styling. Pure CSS — no JS needed. Add data-max to limit the number of selections.

Topics
<fieldset data-toggle-tags> <legend>Favorite Topics</legend> <label><input type="checkbox" name="topics" value="ai"> AI / ML</label> <label><input type="checkbox" name="topics" value="web"> Web Dev</label> <label><input type="checkbox" name="topics" value="mobile"> Mobile</label> </fieldset> <!-- With max selection limit --> <fieldset data-toggle-tags data-layout-max="3"> <legend>Pick up to 3</legend> <label><input type="checkbox" name="skills" value="js"> JavaScript</label> <label><input type="checkbox" name="skills" value="py"> Python</label> <label><input type="checkbox" name="skills" value="go"> Go</label> <label><input type="checkbox" name="skills" value="rust"> Rust</label> </fieldset>
Attribute Description
data-toggle-tags Enable pill-chip styling on a checkbox fieldset.
data-max Maximum number of selections. Unchecked boxes are disabled at the limit.

Why CSS-Only

Native checkboxes give you form participation, validation, reset, keyboard navigation, and accessibility for free. The visual transformation uses :has(:checked) to style labels. JS is only loaded when data-max is set.

Number Stepper (data-stepper)

Add data-stepper to a number input for custom +/− buttons. Hides native spinners and disables buttons at min/max boundaries.

<input type="number" min="0" max="50" step="1" value="1" data-stepper> <!-- Decimal steps --> <input type="number" min="0" max="10" step="0.5" value="1.0" data-stepper>
Attribute Description
data-stepper Enable +/− stepper buttons on a number input.

Without JS, the native number input with browser spinners works fine.

Enhanced Color Input (data-color)

Add data-color to a color input for a styled swatch circle and hex code display. Clicking opens the native color picker.

<input type="color" value="#6366f1" data-color>
Attribute Description
data-color Enable swatch + hex display enhancement on a color input.

Without JS, the native color picker renders (functional but unstyled).

Accessibility Notes

  • Always use labels: Every input needs an associated label
  • Use autocomplete: Helps users fill forms faster and more accurately
  • Provide error messages: Use aria-describedby to link error text to inputs
  • Mark invalid fields: Use aria-invalid="true" for explicit invalid state
  • Avoid placeholder as label: Placeholders disappear when typing
  • Visible focus: Don't remove focus outlines
  • Touch targets: Minimum 44x44px for checkboxes and radios
  • Fieldsets for radio groups: Always wrap radio groups in fieldset

CSS Reference

/* Text inputs, select, textarea */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]), textarea, select { display: block; inline-size: 100%; padding-block: var(--size-s); padding-inline: var(--size-s); min-block-size: var(--size-touch-min); border: var(--border-width-thin) solid var(--color-border); border-radius: var(--radius-m); background: var(--color-surface); font: inherit; transition: border-color var(--duration-fast); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-interactive); box-shadow: 0 0 0 3px oklch(from var(--color-interactive) l c h / 0.15); } input::placeholder { color: var(--color-text-muted); } input:disabled { background: var(--color-surface-raised); cursor: not-allowed; } input[aria-invalid="true"], input:invalid:not(:placeholder-shown) { border-color: oklch(55% 0.25 25); }

Related Elements

  • label - Essential for accessibility
  • form - Container for inputs
  • datalist - Autocomplete suggestions
  • fieldset - Group related inputs (especially radios)
  • textarea - Multi-line text input
  • select - Dropdown selection
  • form-field - Enhanced form field with validation