User Tools

Site Tools


community:ui_ig:style_guide:input_types

Form input type, inputmode, and autocomplete attributes

The input element has several types that may be more useful than text, especially on mobile devices where the virtual keyboard can change. In particular, email, url, and tel correspond to existing IDL field types and can be used to provide a better user experience.

While type="date" and type="datetime" exist, they are problematic in several operating systems (especially Safari on iOS) and accessibility testing suggests that more straightforward numeric inputs are better.

For numeric inputs, type="number" can be confusing and is sometimes not appropriate, given that it is intended to be used for quantities that can be incremented (thus the stepper controls). The inputmode="numeric" and inputmode="decimal" attributes for input type="text" fields provide a better mobile user experience while not enforcing overly restrictive validation rules.

See also:

Roadmap

  1. Add autocomplete attributes to patron registration: #1778063
  2. Add support for input type and inputmode to the fieldmapper editor component: #2105677
  3. Add email, URL, and telephone input type attributes to IDL fields
  4. Add numeric and decimal inputmode to IDL fields where the datatype is text but numbers are expected; add numeric class to grid cells when the IDL field has this inputmode
community/ui_ig/style_guide/input_types.txt · Last modified: 2025/05/15 17:10 by sleary

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

© 2008-2022 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a U.S. 501(c)3 non-profit organization.