Special picker guidelines

Special pickers are a type of user input only used in certain situations. These inputs include date, time, and color pickers.

Date picker

Date pickers allow users to select a specific date. They may appear or be used differently depending on the use or device.

Selecting dates in the past

When a user needs to select a date in the past (e.g., their birth date), it’s often cumbersome to select the date using a calendar. It’s much easier for the user to enter the date via a text input.

It’s best practice to use an input mask in the date input to prompt the user to input the date correctly.

Selecting dates in the future

When selecting dates in the future, the users need to be able to visualize both the date and the day of the week that they are selecting. Having a calendar allows them to do so as it displays year, time, date, and day.

Some date pickers used for selecting dates in the future also allow the user to input the date via the text field.

On phones, the calendars tend to be a lot bigger than on desktop and usually appear as a pop-up. This allows the user to focus on the task at hand and gives them buttons that are big enough for their fingers to press accurately.

---

Date range selector

Date range selectors allow users to select a range of days. Usually, the form will ask the user to choose a starting date either from a calendar or by typing it in. The user will then be asked to select an end date. By default, the user won’t be able to choose an end date that is earlier than the start date.

---

Calendar

Calendars are used to allow users to plan events or review ones they have already planned or added. It is best practice to allow users to add different kinds of events marked with different colors.

Events that happened in the past should appear grayed out or inaccessible to the user so they know that they can’t go to it.

---

Time picker

On a desktop, a user may be asked what time they would like to select in a few different ways. For users or interfaces that use a 12-hour clock, they may be asked to input the time as well as select ‘AM’ or ‘PM’. For interfaces that use a 24-hour clock (also called Military Time), only one input is needed. (However, using a 24-hour clock can lead to confusion for users unfamiliar with this format.)

Using a dropdown is probably the safest way for users to select a time as there is less room for error. This pattern can be used for both clock types.

You will often see this pattern type when booking a table at a restaurant or choosing a meeting time.

When choosing a time on an Android phone, users will probably get the built-in time picker popping up. This 24-hour clock picker lets the user select a time using an easy-to-understand interface.

---

Color pickers and selectors

Color pickers and selectors help users identify and assign colors to different objects.

Color picker

The color picker, also called the eyedropper tool, is used to help the user identify a color or its code. It will often be used to create a design’s color palette or as a reference for another object in the design.

Color pickers are usually only found in design software.

Color selector

The color selector allows users to choose a color from a predetermined selection. Color selectors are most often used in design programs, but they can also be used in non-design programs to assign importance. For example, one might set different calendar events in different colors to avoid confusion, or one might assign colors to different file types to allow for easier searching.

Some common features in color selectors include:

• Color code input field. This allows users to type in the color code without having to select it. This is useful for companies that have a specific color palette.
• Color profile selector. Color profiles are how different color codes are defined. Common examples include RGB, HEX, or HSL.
• Swatch grid. A swatch grid is a preselected list of colors displayed in little squares. Swatch grids usually have a limited selection of colors, making it less difficult for users to choose one.
• Gradient map. A gradient map works similarly to a swatch grid, except with a lot more options.
• Opacity selector. An opacity selector allows designers to choose how transparent an object needs to be on a scale from 0% to 100%.

---

Variations

There are many different variations of special pickers. Using more specific input styles makes it more apparent to the user what they are expected to do.

Controls included in Balsamiq

Balsamiq offers a range of pre-made controls. Use the “Quick Add” tool to find the one you need, then drop it directly into your wireframe.

Date picker: The date picker is a component often used in mobile design. You can set the Balsamiq date picker component to be either year or month.

Time picker: The time picker is a component often used in built-in Android designs.

Date chooser: The date chooser is a text field with a masked area to show the date format.

Calendar: The calendar component allows users to select dates or input events. It can also be used to review events or selected[g] dates.

Color picker: The color picker component can be used to identify colors in an image or design.

DIY symbols

You can make your own custom special picker Symbols in Balsamiq.

Color selector: You can make a color selector using different colored rectangles[i] and a text field.

Date chooser with calendar: You can create this symbol using the date chooser and calendar components.

Time dropdown: You can create this symbol using the combo box and a clock icon.

Date range selector: You can create a date range selector using 2 date choosers and a calendar component.

---