Difference between revisions of "KDE Visual Design Group/HIG/Combo Box"

Jump to: navigation, search
m (19 revisions imported)
(Move notice)
 
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
  
== Purpose ==
+
{{Note|This page is now on [[https://hig.kde.org/components/editing/combobox.html https://hig.kde.org/]]}}
A ''combo box'' is a combination of a drop-down list and an edit control, thus allowing users to enter a value that isn't in the list. It behaves like a drop-down list and allows the user to choose from a list of existing items but adds the option to type a value directly into the control. Newly typed items are usually added to the list and can be selected next time. Combo boxes are typically applied to provide auto-complete or auto-type functionality in a convenient way to the user.
+
 
+
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".
+
The input field of the combo box ("editable" is true) marks the completed part of the item as selected, making it easy to change the completion.
+
 
+
== Guidelines ==
+
 
+
=== Is this the right control ===
+
* Use a combo box for single selection of one out of many items of lists that can be extended by the user. Prefer a simple [[KDE_Visual_Design_Group/HIG/DropDown| drop-down list]] in case of read-only interaction.
+
* Consider to replace the combo box by a [[KDE_Visual_Design_Group/HIG/ListView| list view]] with a connected [[KDE_Visual_Design_Group/HIG/edits| edit control]].
+
 
+
=== 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 the 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 ===
+
* Combo boxes are distinguished visually from drop-down lists (normally by the raised or lowered bevel). Do not override the common processing, e.g. by using a combo box and making it read only in order to simulate a simple drop-down list.
+
* If activating a choice affects the appearance or the enabled state of other controls, place them next to the combo box.
+
* If certain controls in a configuration dialog are only relevant if a certain item is selected (i.e. they are dependent controls), disable them instead of hiding.
+
* Label the combo box with a descriptive caption to the left (cf. [[KDE_Visual_Design_Group/HIG/Alignment| alignment]]).
+
* Create a buddy relation so access keys are assigned.
+
* End each label with a colon.
+
* Use [[KDE_Visual_Design_Group/HIG/Capitalization|sentence style capitalization]] for items.
+
 
+
== Implementation ==
+
[http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKComboBox.html KComboBox]
+
 
+
[[Category:Usability]][[Category:Behavior]][[Category:Editing_and_Manipulation]][[Category:Selection]]
+

Latest revision as of 16:46, 5 February 2019


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

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