Introduction | TrueUI

Atoms | Forms

Text Fields

Examples

If you have any questions please let us know
Please fix the issue with the data above
This information is approved for use

Guidelines

Labels

Mobile

Layout

Validation

Error Messaging

Input Fields

Typography

HTML

<fieldset class="b--none pa0">
 <!-- Normal-->
 <div class="mb3">
   <label for="textinput" class="db pv2">Text Input</label>
   <input type="text" id="textinput" placeholder="Text Input" class="pa2 w-100 ba b--charcoal-medium charcoal-medium">
 </div>
 <!-- Error-->
 <div class="mb3">
   <label for="errorinput" class="db pv2 red">Error Input</label>
   <input type="text" id="errorinput" placeholder="Text Input" class="pa2 w-100 ba b--red charcoal-medium">
 </div>
 <!-- Valid-->
 <div class="mb3">
   <label for="validinput" class="db pv2 green">Valid Input</label>
   <input type="text" id="validinput" placeholder="Text Input" class="pa2 w-100 ba b--green charcoal-medium">
 </div>
 <!-- Textarea-->
 <div class="mb3">
   <label for="textarea" class="db pv2">Textarea</label>
   <textarea rows="8" id="textarea" cols="48" placeholder="Enter your message here" class="pa2 w-100 ba b--charcoal-medium charcoal-medium"></textarea>
 </div>
</fieldset>