Amara styleguide

Fields

Layout

  • We use a single column for everything. This allows users to scan the forms easily.
  • We size inputs to 100% width of the containing element
  • Wrap the input and label together in a .form-group div. This adds spacing between each field.
  • Inside a field, place the label first, followed by the form field, followed by optional help/error text.

Labels and help text

  • Use labels for all fields.
  • For fields that are not obvious, add help text using the helpBlock class.
  • You can also use the helpList class to show a bullet list.
  • In general, use labels and help text instead of placeholder text.

Required vs optional

  • Most fields in a form should be required. This is for a couple reasons:
    • We want to limit the number of fields to create simpler forms. If a field is not required, then consider removing it.
    • Users typically expect to fill in all fields. Therefore the default should be required and the optional should be marked as an alternate.
  • Mark optional fields with "(optional)" in the label. Use the fieldOptional class for this.

Example


  <div class="form-group">
   <label for="">Email</label>
   <input type="email" id="">
 </div>
 <div class="form-group">
   <label for="">Password</label>
   <input type="password" id="">
   <span class="helpBlock">See this <a href="https://www.wikihow.com/Create-a-Secure-Password">WikiHow article</a> for advice</span>
 </div>
 <div class="form-group">
   <label for="">URL <span class="fieldOptional">(optional)</span></label>
   <input type="text" id="">
 </div>
 <div class="form-group">
   <label for="">Additional Information</label>
   <textarea class="form-control"></textarea>
   <ul class="helpList">
     <li>Keep your text concise</li>
     <li>Prefer active voice to passive</li>
     <li>Read your text aloud before submitting it</li>
   </ul>
 </div>
 <div class="form-group">
   <label for="">Date</label>
   <input type="text" id="">
 </div>
 <div class="form-actions">
   <button class="button borderless">Cancel</button>
   <button type="submit" class="button cta">Submit</button>
 </div>
See this WikiHow article for advice
  • Keep your text concise
  • Prefer active voice to passive
  • Read your text aloud before submitting it