Input Controls

Also known as: List of Items, Form Widgets, Input Fields

Tags: forms, selection

A special pattern describing basic input controls (Text box, checkbox, radio button, and drop-down list) in Web applications.

Different types of input controls, created using Wufoo form builder.

Different types of input controls, created using Wufoo form builder.

What problem does the pattern solve?

Text box

  • A good guess of the input can’t be made – the input is free text.

Group of checkboxes

  • User can choose any number of choices from predefined alternatives.
  • The number choices of is not large.
  • Choices don’t affect other choices.

Stand-alone checkbox

  • There are only two options (usually yes-no style) and user can pick only one.

Group of radio buttons

  • User can choose only one only one option from a list of two or more options.

Drop-down list

  • Similar to a group of radio buttons, but saves screen real estate if there are several options from which to choose.

When to use it?

Text box

  • A good guess of the input can’t be made – the input is free text.

Group of checkboxes

  • User can choose any number of choices from predefined alternatives.
  • The number choices of is not large.
  • Choices don’t affect other choices.

Stand-alone checkbox

  • There are only two options (usually yes-no style) and user can pick only one.

Group of radio buttons

  • User can choose only one only one option from a list of two or more options.

Drop-down list

  • Similar to a group of radio buttons, but saves screen real estate if there are several options from which to choose.

How to use it?

General guidelines for all input controls

  • Keep the input control label texts clear and short.
  • Associate input labels with input controls.
  • Indicate where the user is: Especially with longer forms, highlight the input control group currently being active using a light background color if possible.
  • Use Good Defaults.
  • Prefer controls that you have already used on the form if you are not sure which control to use to be consistent.
  • Sort options in a logical order. In most cases alphabetical ordering works best.
  • Keep the controls static – don’t perform commands when options are being selected (Exception: Showing follow-up questions based on user’s answers).

Text box

  • Use Autocomplete to help the user to give an answer and prevent errors.

Stand-alone checkbox & group of checkboxes

  • Use positive phrasing for labels to make it easier to understand what it means when it is checked (Exception: “Don’t show this again”-checkbox).

Radio buttons

  • Make one of the options a default answer.
  • Provide neutral/empty answer to allow the user to cancel the selection.

Why to use it?

Text box

  • Pros: Familiar, fast to use, and flexible.
  • Cons: Prone to errors, doesn’t help the user to give an answer (unless used in conjunction with Autocomplete).

Group of checkboxes

  • Pros: Helps the user to give an answer as all the choices are always visible. Familiar and fast to use.
  • Cons: Uses a lot of screen real estate if many options.

Stand-alone checkbox

  • Pros: Simple if the question is clearly worded. Low screen estate usage.
  • Cons: Only the “on” state is expressed and therefore it requires some extra concentration to understand what it means when it is unchecked (especially if the question is negatively worded, e.g. “Don’t add me to the mailing list”).

Group of radio buttons

  • Pros: Helps the user to give an answer as all the choices are always visible. Familiar and fast to use.
  • Cons: Uses a lot of screen real estate if many options.

Drop-down list

  • Pros: Low screen real estate consumption.
  • Cons: Other options expect the selected one are hidden until the user opens the list.

Sources

The pattern is inspired by “Control Choice” from Jenifer Tidwell’s book “Designing Interfaces: Patterns for Effective Interaction Design” and several other books and articles.

Useful linksUseful links icon

Example images (2 examples)

Comments

  • Diminished Value (www) July 2, 2012 15:29

    Use positive phrasing for labels to make it easier to understand what it means when it is checked (Exception: “Don’t show this again”-checkbox).