Looking for examples of a UI element that allows to select N elements from a set plus define a default
-
25-06-2021 - |
Question
Imagine my application has a list of supported languages. I'm looking for a UI element which allows to select a subset of the supported languages plus make one of them the default.
At first, I thought to use a list with two checkbox columns but the user will be surprised when she activates one in the "default" column because that will deselect the current default. I could use radio buttons but that also feels clunky (and a waste of screen space).
The next idea was to have two lists, one with the available languages and one with the active ones. But how would the user select the default in this case?
Solution
Our current solution works with two lists:
Active Available
* English Italian
French <=> Greek
German
You can drag and drop elements between the lists to make a language active or not. The first element of the left list is the "default". In the UI, we give it a special style, so users can easily recognize "this language is special." A tooltip (and the documentation) reveals "this is the default language."
To select a different default language, just drag one of the elements on the left side to the top of the list.