last Update: 01.06.2022
Platform: Web & Mobile
Designer: Poornima Dagha
Status: Developed in 2105
Intro
The primary use of this pattern is to select and edit items in desktop and mobile responsive forms. There are three states in this pattern- unselected, selected and editing state. It combines two type of components- a dropdown and card to show the different states.
Overview
This pattern can be used in scenarios where the field selection is cascading, and the user needs to fill the form fields in progressive order. The visual treatment of the selected states also helps in showing the progress made in filling the form.
Usage
- The forms fields are cascading and should be filled one after the other. This is meant for a linear flow where a form field depends on the previous selection.
- There are images/ icons to be used as thumbnails for each of the options in the dropdown.
- For short forms with 7-8 selection fields.
- This is a Quick Action only pattern and should not be used inside module pages.
- If the form fields can be selected in any order and are not inter dependent on each other.
- If there is no pictorial representation for the options in the dropdown.
- If the form is lengthy and requires a lot of data filling, use a dropdown instead.
- Not to be used for progressive disclosure.
Behavior & Interaction
This pattern is available for both desktop and mobile responsive platforms and the overall behavior is the same in both with one minor difference wherein the desktop selection flow has a hover state as well.
These images outline the selection flow of the pattern.
Mobile Responsive
Desktop Responsive
Navigation or Interaction Flow
These are the main interactions in this pattern- selecting an option, searching for an option and editing a selected option. Each interaction has been detailed out below.
- Selecting an option for the first time in a form has been outlined in the images above.
- Tapping/ Clicking on the pencil icon takes the user to the editing state. Here the component changes from the card to an expanded dropdown where the selected option is highlighted and first in the list.
- The dropdown state allows the user to search for an option as well.
- Editing an option when the subsequent fields of the form have been filled will have an error/ warning message in the flow.
Editing a selection when no subsequent fields are selected
Desktop Responsive
