Input fields

Text inputs handle everything from simple strings to structured data types like email, tel, and date pickers. Pair each input with a descriptive label and keep placeholders instructional rather than essential, since helper text and validation states can communicate formatting rules far more reliably.

Connect every label via the for/id relationship, and avoid removing native browser affordances (e.g., numeric spinners) so keyboard, touch, and assistive users all benefit from the built-in semantics.

<input type="text">
<input type="text" disabled>
<input type="text" readonly>
<input type="text" required>
<input type="password">
<input type="tel">
<input type="email">
<input type="url">
<input type="search">
<input type="date">
<input type="time">
<input type="datetime-local">
<input type="week">
<input type="month">
<input type="number">

Select elements constrain choices to a known list, perfect for states, categories, or filters where free-form entry would introduce errors. Rely on the native single-select for concise menus and the multiple variant when users need to select several items without leaving the form context.

Keep option labels short and unique so they truncate gracefully, and always provide an empty first option or placeholder when a selection is optional. This ensures assistive tech can announce whether a value has been chosen, preventing accidental defaults.

<select>
  <option value="...">...</option>
  <option value="...">...</option>
  <option value="...">...</option>
</select>
<select disabled>...</select>
<select multiple>
  <option value="...">...</option>
  <option value="...">...</option>
  <option value="...">...</option>
</select>
<select disabled multiple>...</select>

Textareas support longer narratives like feedback, descriptions, or multi-line code snippets. Keep them vertically resizable when possible and pair them with helper text describing content expectations so users can gauge the appropriate length.

Preserve line breaks server-side and mirror them in previews, and ensure disabled or read-only states still contrast enough with the background so the content remains legible.

<textarea></textarea>
<textarea disabled></textarea>

Attached buttons bundle actions directly with their controlling fields: think search bars with submit buttons, unit converters, or segmented filter chips. Grouping the controls keeps spatial relationships obvious and reduces the travel distance between text entry and next step.

Match heights and spacing between inputs and buttons so the group reads as a single control, and ensure keyboard users can tab through the sequence without unexpected focus traps or ARIA misfires.

<div class="group">
  <input type="text">
  <button class="positive">
    <svg class="icon">...</svg>
  </button>
</div>
<div class="group">
  <input type="text">
  <button>...</button>
  <button class="secondary">...</button>
</div>
<div class="group">
  <button class="primary">...</button>
  <input type="text">
  <button class="negative">...</button>
</div>
<div class="group">
  <select>...</select>
  <button class="positive">
    <svg class="icon">...</svg>
  </button>
</div>

Attached labels keep inline units, suffixes, or prefixes tightly coupled to their fields. Use them for currency symbols, measurement units, or quick descriptors when a traditional block label would consume too much vertical space.

Reuse real <label> elements, even for inline adornments, so assistive technologies announce the association. When the label mirrors a unit (like “kg”), keep it short and avoid duplicating the same text inside the input value to prevent redundancy.

<div class="group">
  <input type="text">
  <label for="...">Appended label</label>
</div>
<div class="group">
  <label for="...">Prepended label</label>
  <input type="text">
</div>
<div class="group">
  <select>...</select>
  <label for="...">Appended label</label>
</div>

Icon adornments provide visual hints for expected content—mail icons for email fields, magnifiers for search, warning badges for validation. They also help users scan dense forms by reinforcing intent before they read the full label.

Ensure icons are decorative by default (hide them from screen readers) unless they convey critical meaning, and keep padding symmetrical so focus rings never clip against the SVG container.

<div class="group">
  <input type="text" class="append-icon">
  <svg class="icon">...</svg>
</div>

<div class="group">
  <svg class="icon">...</svg>
  <input type="text" class="prepend-icon">
</div>

<div class="group">
  <svg class="icon">...</svg>
  <input type="text" class="prepend-icon append-icon">
  <svg class="icon">...</svg>
</div>

<div class="group">
  <select class="append-icon">...</select>
  <svg class="icon">...</svg>
</div>

Mixed groups combine labels, icons, multiple inputs, and buttons to build compact flows like newsletter subscriptions or billing forms. Treat each grouping as a mini-layout: align baselines, reuse spacing tokens, and keep the reading order logical so both visual and assistive users can parse the sequence.

<div class="group">
  <label for="..."><svg class="icon">...</svg></label>
  <svg class="icon">...</svg>
  <input type="email" class="prepend-icon">
  <button class="primary">...</button>
  <button class="secondary"><svg class="icon">...</svg></button>
</div>

<div class="group">
  <input type="text">
  <input type="text">
  <button>...</button>
</div>

<div class="group">
  <label for="..."><svg class="icon">...</svg></label>
  <svg class="icon">...</svg>
  <select class="prepend-icon">...</select>
  <button class="primary">...</button>
  <button class="secondary"><svg class="icon">...</svg></button>
</div>

<div class="group">
  <select>...</select>
  <select>...</select>
  <button>...</button>
</div>

Under construction!

<input type="file" id="...">
<label for="...">...</label>

Suggestion panels pair an input with contextual results, ideal for autocomplete, search-as-you-type, or quick-pick lists. Panels can appear below or above the control, and the group variants show how icons, buttons, and stacked inputs keep the affordance cohesive even as the interaction grows richer.

Link the panel and input with aria-controls and aria-expanded so assistive tech understands when results appear, and keep keyboard navigation consistent (arrow keys to traverse, Enter to confirm) to build muscle memory.

<div class="suggestions">
  <input type="...">
  <div class="panel">...</div>
</div>

<div class="suggestions top">
  <input type="...">
  <div class="panel">...</div>
</div>

<div class="suggestions">
  <div class="group"></div>
  <div class="panel">...</div>
</div>