UX Form Design Skill

Form patterns for data collection, validation, and user feedback. This skill covers accessible form design with custom elements.

Form-Associated Custom Elements

Basic Setup

Important: Store element references during construction - NEVER use querySelector.

class CustomInput extends HTMLElement { static formAssociated = true;

// Direct element references - created in constructor #input; #label; #hint; #error;

constructor() { super(); this.internals = this.attachInternals(); this.attachShadow({ mode: 'open' });

// Build DOM and store direct references
this.#label = document.createElement('label');
this.#label.setAttribute('part', 'label');

this.#input = document.createElement('input');
this.#input.setAttribute('part', 'input');

this.#hint = document.createElement('span');
this.#hint.className = 'hint';
this.#hint.setAttribute('part', 'hint');

this.#error = document.createElement('span');
this.#error.className = 'error';
this.#error.setAttribute('role', 'alert');
this.#error.setAttribute('part', 'error');

// Assemble shadow DOM
const field = document.createElement('div');
field.className = 'field';
field.appendChild(this.#label);
field.appendChild(this.#input);
field.appendChild(this.#hint);
field.appendChild(this.#error);

this.shadowRoot.appendChild(field);

}

connectedCallback() { this.addEventListener('input', this); this.addEventListener('blur', this); }

disconnectedCallback() { this.removeEventListener('input', this); this.removeEventListener('blur', this); }

// Required: Set form value set value(val) { this.#input.value = val; this.internals.setFormValue(val); }

get value() { return this.#input.value; }

// Form lifecycle formResetCallback() { this.value = ''; }

formDisabledCallback(disabled) { this.toggleAttribute('disabled', disabled); this.#input.disabled = disabled; } }

Validation

validate() { const value = this.#input.value.trim(); // Direct reference

if (!value && this.hasAttribute('required')) { this.internals.setValidity( { valueMissing: true }, 'This field is required', this.#input // Direct reference ); this.setAttribute('aria-invalid', 'true'); return false; }

// Clear validation this.internals.setValidity({}); this.removeAttribute('aria-invalid'); return true; }

Input Field Structure

Anatomy

<div class="field"> <label class="label" for="input-id">Field Label</label> <input class="input" id="input-id" aria-describedby="hint-id error-id"> <span class="hint" id="hint-id">Optional hint text</span> <span class="error" id="error-id" role="alert"></span> </div>

CSS

.field { display: flex; flex-direction: column; gap: var(--space-2xs); }

.label { font-family: var(--font-display); font-size: var(--step--1); font-weight: 600; color: var(--theme-on-surface); }

.input { padding: var(--space-s); border: 1px solid var(--theme-outline); border-radius: var(--space-2xs); background: var(--theme-surface-variant); color: var(--theme-on-surface); font-size: var(--step-0); font-family: var(--font-sans); }

.input:focus { outline: none; border-color: var(--theme-primary); box-shadow: 0 0 0 3px var(--color-active-overlay); }

.hint { font-size: var(--step--2); color: var(--theme-on-surface-variant); }

.error { font-size: var(--step--2); color: var(--color-error); }

Textarea (Auto-Resize)

Modern Approach (field-sizing)

.textarea { field-sizing: content; min-height: 3lh; max-height: 12lh; overflow-y: auto; }

Fallback for Older Browsers

Use direct element references (created in constructor):

class AutoResizeTextarea extends HTMLElement { #textarea; // Direct reference - NO querySelector #maxHeight = 300;

constructor() { super(); this.attachShadow({ mode: 'open' });

this.#textarea = document.createElement('textarea');
this.#textarea.setAttribute('part', 'textarea');
this.shadowRoot.appendChild(this.#textarea);

}

connectedCallback() { if (!CSS.supports('field-sizing', 'content')) { this.addEventListener('input', this); } }

disconnectedCallback() { this.removeEventListener('input', this); }

handleEvent(e) { if (e.type === 'input') { this.#autoResize(); } }

#autoResize() { this.#textarea.style.height = 'auto'; this.#textarea.style.height = ${Math.min(this.#textarea.scrollHeight, this.#maxHeight)}px; } }

Form Layout

Vertical Stack

.form { display: flex; flex-direction: column; gap: var(--space-m); }

Inline Fields

.form-row { display: flex; gap: var(--space-s); flex-wrap: wrap; }

.form-row > * { flex: 1; min-width: 150px; }

Form Actions

.form-actions { display: flex; justify-content: flex-end; gap: var(--space-s); margin-block-start: var(--space-m); }

Validation Patterns

Real-Time Validation

handleEvent(e) { if (e.type === 'input') { // Validate on input after first blur if (this.#touched) { this.validate(); } } if (e.type === 'blur') { this.#touched = true; this.validate(); } }

Submit Validation

Use direct element references (stored during construction):

// Assumes #input, #container, #error are private fields submit() { const value = this.#input.value.trim(); // Direct reference

if (!value) { this.#input.focus(); // Direct reference this.internals.setValidity( { valueMissing: true }, 'Please enter a value', this.#input // Direct reference ); // Visual shake feedback using Anime.js import { shake } from '../../utils/animations.js'; shake(this.#container); // Direct reference return; }

// Clear and submit this.internals.setValidity({}); this.dispatchEvent(new CustomEvent('form-submit', { bubbles: true, composed: true, detail: { value } })); }

Error Display

// Assumes #error and #input are private fields showError(message) { this.#error.textContent = message; // Direct reference this.setAttribute('aria-invalid', 'true'); }

clearError() { this.#error.textContent = ''; // Direct reference this.removeAttribute('aria-invalid'); }

Accessibility Requirements

Labels

Every input MUST have an associated label:

<!-- Explicit association --> <label for="name">Name</label> <input id="name">

<!-- Implicit association --> <label> Name <input> </label>

<!-- ARIA label for icon-only --> <input aria-label="Search">

Required Fields

<label> Email <span aria-hidden="true">*</span> <span class="sr-only">(required)</span> </label> <input required aria-required="true">

Error Association

<input aria-invalid="true" aria-describedby="email-error"> <span id="email-error" role="alert">Please enter a valid email</span>

Keyboard Submission

Support Ctrl/Cmd+Enter for textarea forms:

handleEvent(e) { if (e.type === 'keydown') { if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); this.submit(); } } }

Input Types

Text Variations

<input type="text" inputmode="text"> <input type="email" inputmode="email"> <input type="tel" inputmode="tel"> <input type="url" inputmode="url"> <input type="number" inputmode="numeric">

Autocomplete

<input name="name" autocomplete="name"> <input name="email" autocomplete="email"> <input name="current-password" autocomplete="current-password">

Placeholder Best Practices

Do

/* Subtle placeholder */ .input::placeholder { color: var(--theme-on-surface-variant); opacity: 0.7; }

Don't

• Never use placeholder as label replacement

• Avoid long placeholder text

• Don't include required format in placeholder alone

Correct Pattern

<label for="phone">Phone Number</label> <input id="phone" placeholder="555-555-5555" aria-describedby="phone-format"> <span id="phone-format" class="hint">Format: XXX-XXX-XXXX</span>

Touch Targets

Ensure inputs meet minimum touch target size:

.input { min-height: var(--min-touch-target); padding: var(--space-s); }

.checkbox-wrapper { min-width: var(--min-touch-target); min-height: var(--min-touch-target); display: flex; align-items: center; justify-content: center; }

Disabled vs Read-Only

/* Disabled: Cannot interact */ .input:disabled { opacity: 0.6; cursor: not-allowed; background: var(--theme-surface); }

/* Read-only: Can select/copy but not edit */ .input:read-only { background: var(--theme-surface); border-style: dashed; }