Forms are a particularly important interface between the user and Audi applications. They often appear at critical points in the user journey. For this reason, forms should be designed so that they can be easily understood and as few information points should be requested as possible.  Optional questions bear a special marking in the form if they are unavoidable. The existing components are combined and grouped as required to create a form structure. 

The size of the form element depends on the basic type size used, which can adapt to the viewport width in question. As such, it is flexible in size. The form elements are available in black and white.

Text Field

Text fields consist of a label and a line. They can vary in width. When the user activates a text field, the label moves upwards, is reduced in size and leaves space for entry.

Text fields requiring certain data formats such as numbers, e-mail addresses or passwords are declared accordingly. This makes it easier for the user to enter information using a virtual keyboard.

Text fields can be combined with an icon.

If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.
HTML
<div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
  <div class="aui-textfield__field">
    <input class="aui-textfield__input" type="text" id="sample-textfield" />
    <label class="aui-textfield__label" for="sample-textfield">Label</label>
  </div>
  <span class="aui-textfield__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.</span>
</div>

Search Field

In a search field, a search icon is combined with a label. Unlike a standard text field, the label is overwritten on entry and does not move upwards. After a few characters have been entered, a dropdown can appear with autosuggest entries.

If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.
HTML
<div class="aui-textfield aui-js-textfield aui-textfield--icon">
  <div class="aui-textfield__field">
    <svg class="audiicon">
      <use xlink:href="#aui-icon-search-small"></use>
    </svg>
    <input class="aui-textfield__input" type="text" id="sample-textfield-icon" />
    <label class="aui-textfield__label" for="sample-textfield-icon">Search</label>
  </div>
  <span class="aui-textfield__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.</span>
</div>
<div class="icon-sprite">
	<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 24 24" id="aui-icon-search-small" xmlns="http://www.w3.org/2000/svg"><title>search-small</title><path d="M22 22l-8.3-8.3L22 22zM15.5 9c.1 3.5-2.6 6.4-6.1 6.5H9c-3.6 0-6.5-2.9-6.5-6.5S5.4 2.5 9 2.5s6.5 2.9 6.5 6.5z" stroke="currentColor" fill="none"/></symbol></svg>
</div>
<style media="screen">
	body {
		background-color: #f2f2f2;
		padding: 50px;
	}
	.icon-sprite {
		width: 0;
		height: 0;
		visibility: hidden;
	}
</style>

Multiple-line Text Field

Multiple-line text fields can hold any amount of text and in doing so grow in height ahead of the user’s entries. The text quantity can be limited to a maximum number of characters if necessary and displayed by means of a countdown. Unlike other text fields, the label and entry text appear in a finely drawn frame.

If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.
HTML
<div class="aui-textfield aui-js-textfield aui-textfield--multiline" data-autosize="">
  <div class="aui-textfield__field">
    <textarea class="aui-textfield__input" id="sample-textfield-multiline" name="name" rows="3"></textarea>
    <label class="aui-textfield__label" for="sample-textfield-multiline">Label</label>
  </div>
  <span class="aui-textfield__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.</span>
</div>

Selection Field

When activated, selection fields show any number of selection options in a dropdown. They can be grouped by means of labels.

If necessary, a checkbox can be provided to allow multiple selection. Multiple options are separated by commas after selection. If the list exceeds the width of the selection field, it is displayed in a shortened form. An apostrophe and a numerical display of the number of selected options indicate the options no longer displayed.

If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.
HTML
<div class="aui-select aui-js-select aui-select--floating-label">
  <select class="aui-select__input" id="sample-select">
    <option selected disabled class="aui-select__input-label">Label</option>
    <option value="0">Audi Sport</option>
    <option value="1">Audi City</option>
    <option value="2">Audi e-tron</option>
    <option value="3">Audi quattro</option>
    <option value="4">Audi connect</option>
    <option value="5">Audi mobility</option>
    <option value="6">Audi driving experience</option>
  </select>
  <label class="aui-select__label" for="sample-select">Label</label>
  <span class="aui-select__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.</span>
</div>

Structuring and Grouping

Form elements can be structured and grouped by means of interim headlines, white space, separation lines and blocks. Lengthier data requests should be subdivided into several stages so as to avoid potential data loss and in order to appear less daunting.

Title
HTML
<fieldset class="aui-fieldset aui-fieldset--textfields">
  <legend class="aui-fieldset__legend aui-fieldset__legend">Title</legend>
  <div class="aui-fieldset__fields">
    <div class="aui-fieldset__field">
      <div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
        <div class="aui-textfield__field">
          <input class="aui-textfield__input" type="text" id="sample-textfield-1">
          <label class="aui-textfield__label" for="sample-textfield-1">Text</label></span>
        </div>
      </div>
    </div>
    <div class="aui-fieldset__field">
      <div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
        <div class="aui-textfield__field">
          <input class="aui-textfield__input" type="text" id="sample-textfield-2">
          <label class="aui-textfield__label" for="sample-textfield-2">Text</label></span>
        </div>
      </div>
    </div>
  </div>
</fieldset>

Marking of Required Fields/Optional Entry Fields

Form fields which do not have to be filled out can be marked with a text supplement such as “(optional)” in a label or field description.

 
If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty. (optional)
HTML
<div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
  <div class="aui-textfield__field">
    <input class="aui-textfield__input" type="text" id="sample-textfield" />
    <label class="aui-textfield__label" for="sample-textfield">Label</label>
  </div>
  <span class="aui-textfield__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty. <small class="aui-small">(optional)</small></span>
</div>
If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.
HTML
<div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
  <div class="aui-textfield__field">
    <input class="aui-textfield__input" type="text" id="sample-textfield" />
    <label class="aui-textfield__label" for="sample-textfield">Label <small class="aui-small">(optional)</small></label>
  </div>
  <span class="aui-textfield__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.</span>
</div>

Validation

Erroneous entries are indicated by means of a red line, a red label, a red error description and, in the case of a group, with a red group headline. 

 
Error messages that reassure users can make it easy for them to correct their mistakes and continue with the form.
HTML
<div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
  <div class="aui-textfield__field">
    <input class="aui-textfield__input" type="text" id="sample-textfield" />
    <label class="aui-textfield__label" for="sample-textfield">Label</label>
  </div>
  <span class="aui-textfield__error">Error messages that reassure users can make it easy for them to correct their mistakes and continue with the form.</span>
</div>
Title
Error messages that reassure users can make it easy for them to correct their mistakes and continue with the form.
HTML
<fieldset class="aui-fieldset aui-fieldset--textfields is-invalid">
  <legend class="aui-fieldset__legend aui-fieldset__legend">Title</legend>
  <div class="aui-fieldset__fields">
      <div class="aui-fieldset__field">
        <div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
          <div class="aui-textfield__field">
            <input class="aui-textfield__input" type="text" id="sample-textfield-1">
            <label class="aui-textfield__label" for="sample-textfield-1">Text</label><span class="aui-textfield__focus-line"></span>
          </div>
        </div>
      </div>
      <div class="aui-fieldset__field">
        <div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
          <div class="aui-textfield__field">
            <input class="aui-textfield__input" type="text" id="sample-textfield-2">
            <label class="aui-textfield__label" for="sample-textfield-2">Text</label><span class="aui-textfield__focus-line"></span>
          </div>
        </div>
      </div>
   <span class="aui-textfield__error">Error messages that reassure users can make it easy for them to correct their mistakes and continue with the form.</span>
  </div>
</fieldset>

Datepicker

Known dates are entered the most easiest way by making use of numeric input fields. A select field for the month avoids misconceptions caused by differing established formats for writing dates in an international context.

A calendar is helpful especially to select previously unknown dates. It is added to an input field as an alternative input option, e.g. in form of a popover. If the period the user can choose a date from is narrow, the input field itself is not needed. On mobile devices, the operating system’s native datepicker is preferred.

Audi UI Kit Sketch
Version 1.4 (Releases: <a href="https://github.com/audi/audi-templates/releases" target="_blank">https://github.com/audi/audi-templates/releases</a>)
ZIP
76.3 MB

Examples

Don’ts

Clearly label form fields.
Don’t place forms against a red background.
Use as few form fields as possible. Structure lengthy forms.