v2.0.14 logo-icon logo-small logo-vertical-small logo-vertical
Sidebar
uSwitch is hiring.

Forms

Fields Github: _fields.scss

This is the basic form field, .us-field wrapper for any single input or select. It sets a few layout options by default (margin) and styles any labels within. You can create a fake label style with .us-faux-label

Best practices

  • All form inputs must have a corresponding label, linked to the input

  • The label should be visible; placeholders should not be relied on as not every browser can see them, nor can all screenreaders. A visible permanent label provides continuous context

  • For text inputs that are optional, add "(optional)" to the input label

  • Add aria-required to any input field that must to be filled in

  • See our best practices for writing form labels

States

  • .us-field--blocked - Blocked label styling.
  • .us-field--inline - Inline label styling.

Example

.us-field--blocked
.us-field--inline

               <div class="us-field">
                 <label for="name">Name</label>
                 <input class="us-form-input" id="name" name="name" placeholder="Please enter your name">
               </div>

Input group Github: _input-group.scss

Input groups allow you to add "boxes" to the left or right of an input. These boxes usually contain a visual icon to represent the usage of the input.

States

  • .us-input-group--disabled - Disabled state for input groups.
  • .us-input-group--blocked - Fluid style.

Example

kWh
kWh
kWh
kWh
.us-input-group--disabled
kWh
kWh
.us-input-group--blocked

               <div class="us-input-group us-margin-bottom">
                 <span class="us-input-group__box"><svg role="presentation" aria-hidden="true" class="us-icon--small us-icon--inputgrey"><use xlink:href="/images/icons.svg#icon-envelope"></use></svg></span>
                 <input class="us-form-input" type="text" id="email" placeholder="Email" />
               </div>
               <div class="us-input-group us-margin-bottom">
                 <input class="us-form-input" type="text" id="kwh" />
                 <span class="us-input-group__box">kWh</span>
               </div>
               <div class="us-input-group us-margin-bottom">
                 <span class="us-input-group__box"><svg role="presentation" aria-hidden="true" class="us-icon--small us-icon--inputgrey"><use xlink:href="/images/icons.svg#icon-envelope"></use></svg></span>
                 <input class="us-form-input" type="text" id="email" placeholder="Email" />
                 <span class="us-input-group__box">kWh</span>
               </div>

Inputs Github: _input.scss

Our standard input styling across the website. This is specifically for text, email, password, search etc. type inputs.

Best practices

  • Specifying an appropriate type attribute (e.g. type="tel" for telephone number fields) will not only control what input is displayed, but also helps mobile devices select a keyboard layout suitable for entering that type of data.

  • Where appropriate use the autocomplete attribute to make it easier for the browser to fill in fields on the users behalf, saving them time on lengthy forms.

States

  • .us-form-input--large - Larger input style.
  • .us-form-input--blocked - Fluid input style.
  • .us-form-input--error - Visual feedback for when the input has an error.
  • .us-form-input--success - Visual feedback for when success needs to be communicated to the user.
  • .us-form-input--disabled - Inactive state for form inputs that can't be interacted with.

Example

.us-form-input--large
.us-form-input--blocked
.us-form-input--error
.us-form-input--success
.us-form-input--disabled

            <input class="us-form-input" type="text" placeholder="Placeholder">

Radios and checkboxes Github: _radio-checkbox.scss

Browsers that support screen density media features display our font icon tick or a box shadow circle. Other browsers fallback to default styling.

Best practices

  • Like select boxes, radio buttons are good for making a selection from a mutually exclusive list of options. The main difference between the two is that with radio buttons, the user must choose exactly one of the options.

  • Use radio buttons when each of the choices matters to the user. Each needs to be considered before they make their choice.

  • Checkboxes in a group should be used for choosing zero or more options from a list of independent options. Toggling one should not change the state of others in the group.

  • A stand-alone checkbox is good for toggling something on/off or opting in/out.

  • Provide a default selection to radio and checkbox groups if it's necessary and wont be changed by 90% of your users.

  • Try to keep the number of radio buttons and checkboxes in the same group to a maximum of 6.

States

  • us-form-input--disabled - Like other types of form inputs, adding this class to the element in conjunction with the disabled attribute helps to make the element look like it can't be interacted with.

Example

us-form-input--disabled

               <div class="us-field us-field--blocked">
                 <label>Do you have a different billing address?</label>
                 <div class="us-field-toggle">
                   <label>
                     <input checked="checked" class="us-form-input" name="null" type="radio">
                     Yes
                   </label>
                   <label>
                     <input class="us-form-input" name="null" type="radio">
                     No
                   </label>
                 </div>
               </div>
               <div class="us-field us-field--blocked">
                 <label>How would you like to be contacted?</label>
                 <div class="us-field-toggle">
                   <label>
                     <input checked="checked" class="us-form-input" name="null" type="checkbox">
                     Mobile
                   </label>
                   <label>
                     <input class="us-form-input" name="null" type="checkbox">
                     Email
                   </label>
                 </div>
               </div>

Selects Github: _select.scss

Select boxes allow users to choose an option or options from a list of options.

Best practices

  • Use select boxes when choosing one or more options from a list of related, but mutually exclusive options e.g. profession, title, month.

  • It can be tempting to put many things in a select box for users to choose from. Try to keep the list of options to between 4 and 15 so the user doesn't become overwhelmed with choices.

States

  • .us-form-select--multiple - Removes the drop down arrow and adjusts the padding of <option> elements. Useful when using <select> elements that have the size="" attribute set to anything higher than 1.
  • .us-form-select--blocked - Fluid style.
  • .us-form-select--error - Visual feedback for when the input has an error.
  • .us-form-select--success - Visual feedback for when success needs to be communicated to the user.
  • .us-form-select--disabled - Inactive state for select boxes. You may also just add the disabled attribute to the <select> element in order to achieve the same effect.

Example

.us-form-select--multiple
.us-form-select--blocked
.us-form-select--error
.us-form-select--success
.us-form-select--disabled

               <select class="us-form-select">
                 <option>A select menu</option>
                 <option>With lots of options</option>
                 <option>And a few more</option>
               </select>

Textarea Github: _textarea.scss

Our standard textarea styling across the website.

States

  • .us-form-textarea--blocked - Fluid textarea style.
  • .us-form-textarea--disabled - Inactive state for textareas that can't be interacted with.

Example

.us-form-textarea--blocked
.us-form-textarea--disabled

            <textarea class="us-form-textarea"></textarea>

Toggle Github: _toggle.scss

Toggle buttons provide an alternative way of displaying radio groups with a small number of options to a user.

IE8 support is included with radioToggle.js which sets a .checked class on the radio button when clicked.

Best practices

  • Use as an alternative to radio groups that have short labels for each option (Yes/No, Opt-in/Opt-out).

  • For forms that have many short radio group questions in them, toggle buttons provide a better experience for quickly selecting answers on both desktop and mobile due to larger visible click areas for each option.

  • Limit the number of options in the toggle group to 3.

States

  • .us-toggle__btn--disabled - Visual styling for toggle buttons that can't be interacted with.

Example

.us-toggle__btn--disabled

               <div class="us-field us-field--blocked">
                 <label>Answer truthfully</label>
                 <div class="us-toggle">
                   <label class="us-toggle__label">
                     <input class="us-form-input" name="choice" type="radio">
                     <span class="us-toggle__btn">
                       Yes
                     </span>
                   </label>
                   <label class="us-toggle__label">
                     <input class="us-form-input" name="choice" type="radio">
                     <span class="us-toggle__btn">
                       No
                     </span>
                   </label>
                 </div>
               </div>
                

               var radioToggle = new RadioToggle({
                 $target: $(".us-toggle")
               })

Validation messages Github: _validation.scss

Used to provide more detailed feedback about the data users have entered into forms.

Best practices

  • For inputs that have a label above them, place the validation message between the input and the label.

  • Use success validation messages only when it makes sense to contextually. For example, they can help to reassure users about the data they entered when multiple criteria need to be satisfied, e.g. password fields.

States

  • .us-validation--error - Error styling for incorrect data on forms.
  • .us-validation--success - Success styling for correct forms.

Example

Validation message here
Validation message here
.us-validation--error
Validation message here
.us-validation--success

               <div class="us-field">
                 <label>Email</label>
                 <div class="us-validation">
                   <div class="us-validation__icon"></div>
                   <div class="us-validation__message">Validation message here</div>
                 </div>
                 <input type="email" class="us-form-input" name="email" />
               </div>

Copyright uSwitch Limited 2016 - 2017. Github