Text Input

Default (40px height)

<div class="elv-text-input">
  <input
    type="text"
    class="elv-text-input__field"
    placeholder="Enter text..."
    aria-label="Text input"
  />
</div>

Input Variants

<!-- Text -->
<input type="text" class="elv-text-input__field" />

<!-- Email -->
<input type="email" class="elv-text-input__field" placeholder="you@example.com" />

<!-- Password with toggle -->
<div class="elv-input-wrapper">
  <input type="password" class="elv-text-input__field elv-text-input__field--password" />
  <button class="elv-password-toggle material-symbols-outlined" aria-label="Toggle password">
    visibility
  </button>
</div>

<!-- Number -->
<input type="number" class="elv-text-input__field" />

<!-- URL -->
<input type="url" class="elv-text-input__field" placeholder="https://example.com" />

<!-- Tel -->
<input type="tel" class="elv-text-input__field" placeholder="(555) 123-4567" />

Input States

<!-- Error State -->
<input
  class="elv-text-input__field elv-text-input__field--error"
  aria-invalid="true"
  aria-describedby="error-id"
/>
<p id="error-id" class="elv-input-error" role="alert">Error message</p>

<!-- Disabled -->
<input class="elv-text-input__field" disabled />

<!-- With Label -->
<label class="elv-input-label" for="input-id">Label</label>
<input id="input-id" class="elv-text-input__field" />

<!-- With Helper Text -->
<input class="elv-text-input__field" />
<p class="elv-input-helper">Helper text</p>

<!-- Required -->
<label class="elv-input-label">
  Label <span class="elv-required">*</span>
</label>
<input class="elv-text-input__field" required aria-required="true" />

Large Variant (48px height)

<div class="elv-text-input elv-text-input--lg">
  <input type="text" class="elv-text-input__field" />
</div>

Complete Form Example

Accessibility Notes

• Labels: Always pair inputs with labels using for and id attributes
• ARIA Labels: Include aria-label when label is not visible
• Error States: Use aria-invalid="true" and aria-describedby for error messages
• Required Fields: Use required attribute and aria-required="true"
• Focus State: 3px light purple outline (#c3bde5) with 1px offset — CRITICAL for accessibility
• Keyboard Navigation: Tab to move between inputs, Shift+Tab to move backward
• Password Toggle: Include aria-label="Toggle password visibility" on toggle button
• Helper Text: Use aria-describedby to link helper text to input
• Touch Targets: Minimum 40px height, use 48px for better mobile accessibility

Design System Specs

Spacing Guidelines