Skip to main content

ChoiceBox

Shadow dwc-choicebox
Java API

The ChoiceBox component is a user interface element designed to present users with a list of options or choices. Users can select a single option from this list, typically by clicking the ChoiceBox, which triggers the display of a dropdown list containing available choices. Users can also interact with the ChoiceBox with the arrow keys. When a user makes a selection, the chosen option is then displayed in the ChoiceBox button.

Usages​

ChoiceBox components are used for various purposes, such as selecting items from a menu, choosing from a list of categories, or picking options from predefined sets. They provide an organized and visually pleasing way for users to make selections, particularly when there are multiple options available. Common usages include:

  1. User Selection of Options: The primary purpose of a ChoiceBox is to allow users to select a single option from a list. This is valuable in applications that require users to make choices, such as:
  • Selecting items from a list
  • Choosing from a list of categories
  • Picking options from predefined sets

  1. Form Inputs: When designing forms that require users to input specific options, the ChoiceBox simplifies the selection process. Whether it's selecting a country, state, or any other option from a predefined list, the ChoiceBox streamlines the input process.

  2. Filtering and Sorting: ChoiceBox can be employed for filtering and sorting tasks in applications. Users can choose filter criteria or sorting preferences from a list, facilitating the organization and navigation of data.

  3. Configuration and Settings: When your application includes settings or configuration options, the ChoiceBox provides an intuitive way for users to adjust preferences. Users can pick settings from a list, making it easy to tailor the application to their needs.

tip

The ChoiceBox is intended for use when a preset number of options are available, and custom options should not be allowed or included. If allowing users to enter custom values is desired, use a ComboBox instead

Constructors​

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

Using the

setDropdownType()
method will assign a value to the type attribute of a ChoiceBox, and a corresponding value for the data-dropdown-for attribute in the dropdown of the ChoiceBox. 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 ChoiceBox will be increased to fit the content. However, using the

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

tip

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

Show Code

Opening Dimensions​

The ChoiceBox 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 ChoiceBox component, which will be required when styling via CSS is desired.

Loading...

CSS Properties​

These are the various CSS properties that are used in the component, with a short description of their use.

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 ChoiceBox component, consider the following best practices:

  1. Clear and Limited Options: Keep the list of choices concise where possible, and relevant to the user's task. A ChoiceBox is ideal for presenting a clear list of options.

  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. Default Selection: Set a default selection when the ChoiceBox is initially displayed. This ensures a pre-selected option, reducing the number of interactions required to make a choice.

  4. ChoiceBox vs. Other List Components: A ChoiceBox 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 is desired, preventing users from entering custom or unexpected data.