Select fields display a long option list when the menu opens but collapse after the user selects an option. What if you could do the same with select chips? This would save a lot of vertical space and reduce clutter when the user checks over the form.
Suppose the user has to select a time. They select “1:30 PM,” and the other chips collapse, and only the selected time is shown. An X button next to the chip allows users to deselect that option if needed. If they deselect it, the chips uncollapse and revert to the default state.
What do you think of this pattern? Is it better than a select field? Why or why not?
I agree about the layout change with the collapse being a problem. I also think for something chronological like this menu, the vertical layout gives additional context (earlier is up, later is down), allowing you to zero in on the time you want more quickly and with less cognitive effort.
the chip option gives me the impression that there is something else to select. It also brings up different directions (you can read from left to right or from top to bottom), which can be confusing. I think that in this case, an input option with an hour type would be a better choice, or an input with arrows to go up or down in time.
I think the chips are quicker because you only click once. There's a drawback if there are many rows because they are hard to scan I'm not sure the collapsed view is intuitive. Not really sure of the value of hiding the other options and making it two clicks to choose a different option.
The 1:30 PM chip looks 'selectable' i.e. it looks as though tapping it would activate it and do something. However, it actually is a label, and the active element is the 'x' icon.
As others have mentioned below, the uncollapsed state of the chips takes significantly more vertical space.
For both these reasons, I would prefer the dropdown.
I’d be concerned about potential jankiness when switching between collapsed and expanded states with the chip layout. I can’t really imagine any type of state change which would seem natural compared with a tried-and-tested select element.
1 Select Field vs 12 Select Chips
I agree about the layout change with the collapse being a problem. I also think for something chronological like this menu, the vertical layout gives additional context (earlier is up, later is down), allowing you to zero in on the time you want more quickly and with less cognitive effort.
Interesting concept. The main drawback to the chips approach is the significant change in layout/size between the collapsed and uncollapsed states.
Because it is a single-select, it seems like a lot of effort to build with little value. IMHO
the chip option gives me the impression that there is something else to select. It also brings up different directions (you can read from left to right or from top to bottom), which can be confusing. I think that in this case, an input option with an hour type would be a better choice, or an input with arrows to go up or down in time.
I think the chips are quicker because you only click once. There's a drawback if there are many rows because they are hard to scan I'm not sure the collapsed view is intuitive. Not really sure of the value of hiding the other options and making it two clicks to choose a different option.
My $0.02:
The 1:30 PM chip looks 'selectable' i.e. it looks as though tapping it would activate it and do something. However, it actually is a label, and the active element is the 'x' icon.
As others have mentioned below, the uncollapsed state of the chips takes significantly more vertical space.
For both these reasons, I would prefer the dropdown.
It doesn’t allow the user to select a specific time.
It’s a predefined time and is limited in that design.
I’d be concerned about potential jankiness when switching between collapsed and expanded states with the chip layout. I can’t really imagine any type of state change which would seem natural compared with a tried-and-tested select element.
Hi, sounds good, but if user wanted to explore other options, he need to tap on "x" mark to be xplore other options.