Skip to main content

ComboBox

Shadow dwc-combobox
Java API

The ComboBox component is a user interface element designed to present users with a list of options or choices, as well as a field for entering their own custom values. Users can select a single option from this list, typically by clicking the ComboBox, which triggers the display of a dropdown list containing available choices, or type in a custom value. Users can also interact with the ComboBox with the arrow keys. When a user makes a selection, the chosen option is then displayed in the ComboBox.

Usages​

The ComboBox component is a versatile input element that combines the features of both a dropdown list and a text input field. It allows users to select items from a predefined list or enter custom values as needed. This section explores common usages of the ComboBox component in various scenarios:

  1. Product Search and Entry: Use a ComboBox to implement a product search and entry feature. Users can either select a product from a predefined list or type in a custom product name. This is helpful for applications like e-commerce sites where products are vast and diverse.

  2. Tag Selection and Entry: In applications involving content tagging, a ComboBox can serve as an excellent choice. Users can select from a list of existing tags or add custom tags by typing them. This is useful for organizing and categorizing content. Examples of such tags include:

    • Project Labels: In a project management tool, users can select labels or tags (e.g., "Urgent," "In Progress," "Completed") to categorize tasks or projects, and they can create custom labels as needed.
    • Recipe Ingredients: In a cooking or recipe app, users can select ingredients from a list (e.g., "Tomatoes," "Onions," "Chicken") or add their own ingredients for custom recipes.
    • Location Tags: In a mapping or geotagging application, users can choose predefined location tags (e.g., "Beach," "City," "Park") or create custom tags to mark specific places on a map.

  3. Data Entry with Suggested Values: In data entry forms, a ComboBox can be used to speed up input by providing a list of suggested values based on user input. This helps users enter data accurately and efficiently.

    tip

    The ComboBox should be used when users are allowed to enter custom values. If only preset values are desired, use a ChoiceBox instead.

Constructors​

  1. ComboBox()
    : Constructs a new ComboBox without a label.
  2. ComboBox(String label)
    : Constructs a new ComboBox with the specified label.
  3. ComboBox(String label, ComponentEventListener< ListSelectEvent> selectListener)
    : Constructs a new ComboBox with the given label and a listener to handle item selection events.

Custom Value​

Changing the custom value property allows control over whether or not a user is able to change the value in the ComboBox component's input field. If true, which is the default, then a user can change the value. If set to false, the user won't be able to change the value. This can be set using the

setAllowCustomValue()
method.

Show Code

Placeholder​

A placeholder can be set for a ComboBox which will display in the text field of the component when it is empty to prompt users for the desired entry in the field. This can be done using the

setPlaceholder()
method.

Show Code

Using the

setDropdownType()
method will assign a value to the type attribute of a ComboBox, and a corresponding value for the data-dropdown-for attribute in the dropdown of the ComboBox. This is helpful for styling, as the dropdown is taken out of its current position in the DOM and relocated to the end of the page body when opened.

This detachment creates a situation where directly targeting the dropdown using CSS or shadow part selectors from the parent component becomes challenging, unless you make use of the dropdown type attribute.

In the demo below, the Dropdown type is set and used in the CSS file to select the dropdown and change the background color.

Show Code

Max Row Count​

By default, the number of rows displayed in the dropdown of a ComboBox will be increased to fit the content. However, using the

setMaxRowCount()
method allows for control over how many items are displayed.

caution

Using a number that is less than or equal to 0 will result in unsetting this property.

Show Code

Opening Dimensions​

The ComboBox component has methods that allow manipulation of the dropdown dimensions. The maximum height and minimum width of the dropdown can be set using the

setOpenHeight()
and
setOpenWidth()
methods, respectively.

tip

Passing a String value to either of these methods will allow for any valid CSS unit to be applied, such as pixels, viewport dimensions, or other valid rules. Passing an int will set the value passed in pixels.

Styling​

Shadow Parts​

These are the various parts of the shadow DOM for the ComboBox component, which will be required when styling via CSS is desired.

Loading...

Reflected Attributes​

The reflected attributes of a component will be shown as attributes in the rendered HTML element for the component in the DOM. This means that styling can be applied using these attributes.

Loading...

Dependencies​

This component relies on the following components - see the related article for more detailed styling information:

Loading...

Best Practices​

To ensure an optimal user experience when using the ComboBox component, consider the following best practices:

  1. Preload Common Values: If there are common or frequently used items, preload them in the ComboBox list. This speeds up selection for commonly chosen items and encourages consistency.

  2. User-Friendly Labels: Ensure that the displayed labels for each option are user-friendly and self-explanatory. Make sure users can easily understand the purpose of each choice.

  3. Validation: Implement input validation to handle custom entries. Check for data accuracy and consistency. You may want to suggest corrections or confirmations for ambiguous entries.

  4. Default Selection: Set a default selection, especially if there is a common or recommended choice. This enhances the user experience by reducing the need for extra clicks.

  5. ComboBox vs. Other List Components: A ComboBox should be used over other List components in the following situations:

  • Multiple Selection is not needed or required, and all items do not need to be displayed at once.
  • A selection of predefined choices, as well as custom entry is desired, allowing users to enter custom or data or select predetermined, often commonly used items.