How to use the ComboBox in JavaFX

Contents

The ComboBox in JavaFX is very easy to use, and it is the advanced version of the JavaFX ChoiceBox. Since the ComboBox is the same as the ChoiceBox, it lets the user select an item from the ComboBox. When you want to use the ComboBox in your JavaFX application, you need to add items to choose from the user.

The ComboBox is the advanced version because it allows it to be editable. What this means is the user can type something in its text area or the text field. This feature will work if you allow the user to type something in the ComboBox, but it also depends on your application requirements. So this tutorial ComboBox in JavaFX will teach you how to use the JavaFX ComboBox.

I will walk you through creating the JavaFX ComboBox, and learn how to add items to the JavaFX ComboBox and show more examples in this tutorial with code snippets. This tutorial is perfect for beginners like you and assures you will learn more.

JavaFX ComboBox Examples

The following examples will show you how to create the ComboBox in JavaFX and will show you how to add items in different ways or methods. We will also use the layout in JavaFX as our layout or container for our nodes and display the nodes in our layout like the ComboBox in JavaFX. Please proceed below to learn more and let’s get started.

Creating the JavaFX ComboBox

To create the JavaFX ComboBox, you need to use its constructor and instantiate it. Instantiate means calling the constructor in Java. The following code snippet below will show you how to create an instance or object of the JavaFX ComboBox.

// This will create the ComboBox
ComboBox<String> list = new ComboBox<>();

ComboBox can be of any type: you can add nodes as items in your JavaFX ComboBox. For example: ComboBox<HBox> controls = new ComboBox<>();

Add items to a ComboBox in JavaFX

Once you have created the JavaFX ComboBox, you can now add items or choices to select. Adding items is important if you have a ComboBox in your application to work. The example code snippet below will show you how to add items to your ComboBox.

// methods to add items to your combobox
list.getItems().addAll("Java","C#","CSS","React");

// methods to add items to your combobox
String[] items = {"Java","C#","CSS","React"};
list.getItems().addAdd(items);

// methods to add items to your combobox
// The other method is in the YouTube Video below.
// at the loadFile() method.

Add the ComboBox to the Scene

You need to know how to use the JavaFX Layout as mentioned above and click the link to learn more if you want to learn more about the layout in JavaFX. You can use whatever layout node to use and add to the Scene Graph. The example code below will show you how to add the layout and display nodes or the JavaFX ComboBox. You can also use Scene Builder to make it easy and load the FXML file using different codes.

You can learn to load the fxml file in the YouTube video below.

// This will add the layout and show it to the scene.
ComboBox<String> list = new ComboBox<>();
list.getItems().addAdd("Java","C#","CSS","JavaScript");

// Creating and showing the layout
StackPane root = new StackPane();
root.getChildren().add(list);
Scene scene = new Scene(root, 400, 400);
stage.setScene(scene);
stage.show();

Output

Set the ComboBox Editable

As mentioned above, the JavaFX ComboBox is editable. This feature is not enabled by default and this means the user cannot type anything in the ComboBox if not enabled. The following line of code below will show you how to enable this feature.

combobox.setEditable(true);

Output

Add item with setEditable

If you enable the setEditable() method, I will teach you how to add items when you enter or type something in the text field of the JavaFX ComboBox. The following code below will teach you how to add items to the ComboBox by typing something and pressing the Enter key on your keyboard.

// make an ActionEvent to make this work
// using the lambda expression
comboBox.setOnAction(event ->{
    String addItem = comboBox.getValue();
    comboBox.getItems().add(addItem);
});

Determine the selected value

If you want to get the selected value from the ComboBox you need to read the selected value using the getSelectionModel() method and create an Action listener to listen from the selection. If we get the selected value, we will display it on our label for the sake of this tutorial. Please proceed to the example code below to learn more.

comboBox.setOnAction(event ->{
    String selectedItem = comboBox.getSelectionModel().getSelectedItem();
    label.setText(selectedItem);
});

Output

Styling ComboBox with CSS

JavaFX is the same as a website: it accepts CSS, but it is based on JavaFX CSS functions. Adding CSS to our nodes will make their appearance more beautiful. The following CSS code below will show you what part of the ComboBox in JavaFX can allow for styles.

/* The ListCell that shows the selected item in a non-editable ComboBox */
.combo-box .list-cell {
 -fx-background-color: yellow;
}
/* The TextField that shows the selected item in an editable ComboBox */
.combo-box .text-input {
 -fx-background-color: yellow;
}
/* Style the arrow button area */
.combo-box .arrow-button {
 -fx-background-color: lightgray;
}
/* Set the text color in the popup list for ComboBox to blue */
.combo-box-popup .list-view .list-cell {
 -fx-text-fill: blue;
}