ComboBox

A ComboBox is similar to a ChoiceBox, but it is more powerful:

• ChoiceBox → user can only choose from the list.
• ComboBox → user can choose from the list, and it can also allow typing.

FXML

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>

<VBox fx:id="rootVBox"
      spacing="15"
      alignment="CENTER"
      xmlns="http://javafx.com/javafx/17"
      xmlns:fx="http://javafx.com/fxml/1"
      fx:controller="org.example.demo.HelloController">

    <Label text="Choose your favorite programming language:"/>

    <ComboBox fx:id="languageComboBox"
              onAction="#handleLanguageSelection"
              prefWidth="200"/>

    <Button text="Add Custom Language"
            onAction="#enableCustomInput"/>

    <Label fx:id="resultLabel"
           text="No language selected yet."/>

</VBox>

Controller

package org.example.demo;

import javafx.collections.FXCollections;
import javafx.fxml.FXML;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Label;

public class HelloController {

    @FXML
    private ComboBox<String> languageComboBox;

    @FXML
    private Label resultLabel;

    @FXML
    private void initialize() {

        // Add items to ComboBox
        languageComboBox.setItems(FXCollections.observableArrayList(
                "Java",
                "Python",
                "C++",
                "JavaScript",
                "Kotlin",
                "Flutter"
        ));

        // Default selected item
        languageComboBox.setValue("Java");

        // Show default value
        resultLabel.setText("Default language: " + languageComboBox.getValue());
    }

    @FXML
    private void handleLanguageSelection() {
        String selectedLanguage = languageComboBox.getValue();

        if (selectedLanguage == null || selectedLanguage.isEmpty()) {
            resultLabel.setText("No language selected.");
        } else {
            resultLabel.setText("You selected: " + selectedLanguage);
        }
    }

    @FXML
    private void enableCustomInput() {

        // Allow the user to type in the ComboBox
        languageComboBox.setEditable(true);

        resultLabel.setText(
                "You can now type your own language in the ComboBox."
        );
    }
}

What happens?

1. When the program starts:

   • The ComboBox contains:

     • Java
     • Python
     • C++
     • JavaScript
     • Kotlin
     • Flutter

   • Java is selected by default.

2. When the user selects another item:

   • handleLanguageSelection() runs.
   • The label changes.

Example:

You selected: Python

3. When the user clicks the button:

   • The ComboBox becomes editable.
   • The user can type something like:

Rust

Then selecting or pressing Enter updates the label to:

You selected: Rust

Important ComboBox methods

languageComboBox.getValue();      // Get selected value
languageComboBox.setValue("Java");// Set selected value
languageComboBox.setEditable(true); // Allow typing
languageComboBox.getItems().add("Rust"); // Add new item
languageComboBox.getItems().remove("C++"); // Remove item

Difference between ChoiceBox and ComboBox