Text input
Usage notes
Group form fields together into smaller chunks, this makes the form feel easier to complete and less intimidating.
<label class="field field--spaced field--text">
<b class="field__label">Lorem</b>
<input class="input input--med" type="text" value="Text as it will appear when user types">
</label>
<label class="field field--spaced field--text">
<b class="field__label">Email account</b>
<span class="description field__description label__description">This will be your username</span>
<input class="input input--med" type="email" value="ex">
</label>Developer Notes
Labels should always be used as screen-readers will have problems if they are omitted. The wrapping label pattern is preferred over the use of the for attribute, as this requires a corresponding id on the target form input, which may change according to how it needs to be integrated with a backend system.
All inputs have autocorrect="off" added for usability on mobiles and tablets.