Form Structure

Interaction Specs

Interaction Specs: 

Forms contain form elements.

Form elements are different types of input elements, checkboxes, radio buttons, buttons, and more.

Visual Specs

Visual Specs: 

Pattern Summary

Pattern Summary (Unity): 

Why Use This Pattern

A form or individual form elements enable the capture and storage of user data to carry out sequential actio filtering data, registering for a new account, navigating to another page, applying actions for a specific item, performing bulk actns (i.e., searching,ions).

What is the Solution

The most common form elements are text field, radio button, drop down menu/list, check boxes, date selector and button to submit data. There are many ways these form elements can be used:

  • Standalone Form Element: There are instances where a single form element is used on its own for navigation and data sorting purposes. The most common, standalone form element is a drop-down menu item. Refer to the Custom Drop Down pattern for more information.
  • Short Form: Use when more than one form element is used in a small grouping on a section of a page (i.e., filtering section above a data table, Register tab on My VMware login page, License Key Folders panel).
  • Full Page Form: Commonly used within a full-page format when many pieces of data are needed from the user (i.e., full account registration form) or when surfacing available options for the user to specify an option (i.e.,configurating a new subscription service).

VMware date guideline as defined within the UI Text Standards from the R&D UX Design Team:

  • Use a numeric format, such as 10/13/2013, when dates appear in:
    • A long list
    • A list that is sorted chronologically
    • The text input box of a date picker
  • Write the date out in long form, for example October 13, 2013, when the date is used in a label ("Last login" or "Last refresh").
  • Within a datagrid, use your judgment to determine the best format for presenting the date. The numerical form is easier for users to scan, while the long form might be more familiar to novice users.

When to Use This Pattern

Use form elements when user input is needed.

When to use a Dropdown List

A general guideline is to use a Dropdown list when there are up to 10 items, but may use more if auto-complete is enabled, or if the user is familiar with the set of choices, such as a list of the 50 states.

  • To allow the user to select a single value from a list.
  • The list of available values is long and space is constrained.
  • Use a dropdown when custom values are not allowed.

When to use Radio Buttons

In general, use radio buttons to show seven or less options. For eight or more options, use a Drop down or Combo box. Radio buttons are preferred over drop-down menus when the options are the only set of controls in a page or dialog box.

  • The user needs to make a choice between mutually exclusive options.
  • The user needs to set attributes or properties after selecting an option.
  • Use radio buttons if It's beneficial to have all options visible.

Do Not Use This Pattern When

As primary, secondary and tertiary navigation to access the main sections of the portal.

When not to use a Dropdown List

  • The user needs to select multiple values (use checkboxes).
  • There are less than 7 options and the user needs to see them all at once (use radio buttons).
  • The user must be able to add a value to the list (use a combo box).
  • The values are numbers. (Use a spin control).
  • The list of choices isn't instantly available. Users should not need to wait for the list to load.
  • The list is too long. Use a scrolling list control instead.

When not to use Radio Buttons

  • Space is constrained (use a Dropdown List).
  • The user may need to select multiple choices within a group (use checkboxes).
  • The user may need to enter a choice that is not pre-defined (use a combo box).
  • The user needs to select from a range of values (use a slider).


GUI Kit contains all Unity Light theme patterns in vector format

Adobe Illustrator Download 2.1 MB
Vector PDF Download 2.7 MB

Updated November 2015