Difference between revisions of "KDE Visual Design Group/HIG/DropDown"

Jump to: navigation, search
(Created page with "__NOTOC__ == Purpose == A ''drop-down list'' is a GUI control which allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single v...")
 
(Move notice)
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
  
== Purpose ==
+
{{Note|This page is now on [[https://hig.kde.org/components/editing/dropdown.html https://hig.kde.org/]]}}
A ''drop-down list'' is a GUI control which allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. When activated, it displays (drops down) a list of values, from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value. A drop-down list works similar to a list box but hides the complete list until the user initiate the drop down. The disadvantage of drop-down lists compared to related controls like radio buttons or lists is that the options are not visible without further interaction.
 
 
 
The list provides auto-complete feature for the whole string, independently of the "editable" property. Given the items of "bike", "boat", and "car":
 
*If one types "b", the list selects "bike".
 
*If one (rapidly) types "bo", it selects "boat".
 
*If one types "c", it selects "car".
 
One can repeatedly type a letter to cycle through items of the (read-only) drop-down list starting with this letter.
 
 
 
== Guidelines ==
 
 
 
=== Is this the right control ===
 
* Use a drop-down list for single selection of one out of many items. If users should be able to add items use a [[KDE_Visual_Design_Group/HIG/Combo_Box| combo box]].
 
* For only a few options, consider to use a set of [[KDE_Visual_Design_Group/HIG/Radio_Buttons|radio buttons]].
 
* For a single selection out of a large number of items (n>20), use a [[KDE_Visual_Design_Group/HIG/ListView| list view]].
 
* Prefer controls that show the options without further user interaction, except for the following cases:
 
** the list of options may change over time,
 
** the contents are obvious from the label and the one selected item, for example ''Month'' and ''January''
 
** the control is part of a related sequence of controls. For example, to set a reminder to ring 5 hours or minutes before or after an event.
 
 
 
=== Behavior ===
 
* Show a maximum of eight items at once (maxVisibleItems=8).
 
* When possible apply changes immediately but do not initiate an action (like print, send, delete) when the user selects an item from a drop-down list.
 
* Do not add controls to the drop-down (e.g. check boxes for each item).
 
* Place options that represent general options (e.g. all, none) at the beginning of the list.
 
* Sort list items in a logical order. Make sure sorting fits translation.
 
* Make sure the items are easily accessible via keyboard by moving distinctive letters to the beginning of each option. For example, in a list of countries on continents, write "Germany (Europe)" instead of "Europe/Germany".
 
* Do not have blank list items; use meta-options, e.g. (None) instead
 
 
 
=== Appearance ===
 
* Label the drop down list with a descriptive label to the left of the drop down list (cf. [[KDE_Visual_Design_Group/HIG/Form_Label_Alignment| Alignment]]).
 
* Create a buddy relation so access keys are assigned.
 
* If activating a choice affects the appearance or the enabled state of other controls, place them next to the drop down list or below the drop down list with a space indentation.
 
* Use sentence style capitalization for the label and the options.
 
 
 
== Implementation ==
 

Latest revision as of 17:01, 5 February 2019


Note-box-icon.png
Note
This page is now on [https://hig.kde.org/]

This page was last edited on 5 February 2019, at 17:01. Content is available under Creative Commons License SA 4.0 unless otherwise noted.