d8e83b57ea
* Add UI Guidelines to SDK docs * Add UI Guidelines to SDK docs * Fixing build errors * optimize PNGs * add UI guidelines landing page placeholder * IJ SDK Docs <-> UI guidelines crosslinks updated * split_button.md: remove reference to removed setting * use <ui-path> * use MD instead of <note> * use %gh-ic% links * drop_down.md: fix <control> * code samples: fix most obvious issues * remove obsolete `_defaults.md` * ijs.tree: UI cleanup * Delete "under construction" pages * Fix headers * Add link-summary * Remove invalid links * Delete unused files * Remove ''@2x' from image file names * Use Markdown syntax for some images and tables * Rename non-unique files to unique * Remove alpha in images where content is unreadable * align quotation marks * Controls: cleanup/fixes, add code links, edit * tooltip.md: fix HTML * misc fixes * typography.md: fix table contents * typography.md: fix table header * UI guidelines landing page + TOC fixes * remove unused icons_list.md * Normalize image paths * validation_errors.md: Fix broken tab * "correct"/"incorrect" labels styling * Resize images to 50% * button.topic: fixes * grammar, spelling, minor edits * remove ' ' * fix 99px * cleanup * UI_kit.md: minor * Fix "MRK058: Large image in paragraph rendered as a block element by default." * button.topic: Add img[alt] * mnemonics.md: Update "Contact Us" link to the IJSDK YouTrack * split_button.md: Use ui-path * UI landing: add feedback snippet * Improve code snippets formatting and naming * Fix code samples * Fix code samples * Add Kotlin variants for code samples * Add icons_list.md * crosslinks * Change external link to https://intellij-icons.jetbrains.design/ * icons list -> https://intellij-icons.jetbrains.design * Hide info about reducing split button to simple action button (now it is available through the registry only) * reformat * icons_style.md: Images in new line --------- Co-authored-by: marianna.kononenko <marianna.kononenko@jetbrains.com> Co-authored-by: Yann Cébron <yann.cebron@jetbrains.com>
4.0 KiB
Combo Box
UI guidelines on using combo boxes.
Implementation: ComboBox
A combo box combines a drop-down list and an input field, allowing the user to select a value from the list or enter a custom value.
{width=328}
Use ComboBox instead of javax.swing.JComboBox.
To make combo box editable invoke:
comboBox.setEditable(true);
When to use
Use a combo box if:
-
The user needs to select a value or enter a custom value.
{width=165} -
The possible choices are objects or states.
-
The user may need to return to previous values. For example, save previously entered paths, so the user can quickly select them later:
{width=413}
When not to use
If the number of options is finite, and there’s no need to enter custom values. In this case, use a drop-down list or radio buttons.
If it’s not possible to list the most likely choices. In this case, use an input field instead.
{width=152}
If the list is big, and the user knows what value they need and won’t review the list. In this case, use an input field with completion.
{width=509}
How to use
For the label and the default value apply the same rules as for the drop-down list.
If there are no values in the list initially, replace the combo box with an input field. This way, users won't waste their time clicking the empty combo box to find out that there are no options available.
| Incorrect | Correct |
|---|---|
 {width="221"} |
 {width="216"} |
Replace the input field with a combo box after a value has been entered and confirmed.
Menu
Control
Open the combo box menu by clicking the arrow button on the right or pressing the Down arrow key when the combo box is focused. The menu opens down by default. If there is not enough space, the menu opens up.
When the menu opens, select the element that was shown in the closed combo box. If a custom value is entered, then do not select a value in the list.
Move the selection in the menu and update the value in the combo box by pressing the Up and Down arrow keys. On mouse hover, move the selection to an item the cursor is pointing to and update the value by clicking the mouse button or pressing Enter.
The menu remains opened until the user clicks the item in the list, presses Enter or Esc, clicks outside the menu, or switches to another app.
Menu items
The menu list contains predefined or the most likely options. Follow the rules for drop-down menu items.
If the user needs to return to previous inputs, add such values to the end of the list when clicking the confirmation button in the dialog.
{width=413}
Use built-in buttons to add values or expand the combo box, e.g., the browse button:
{width=384}
Validation
If the user enters an invalid value, highlight the combo box with red and show an error message in a tooltip. For more details, see Validation errors.
{width=235}
Sizes and placement
Follow the drop-down guidelines.