Building a JavaFX Search Bar

The VocabHunter Search Bar

JavaFX and ControlsFX


Basic Structure of the Search Bar

<ToolBar fx:id="barSearch">
<Button fx:id="buttonCloseSearch" ... />
<CustomTextField fx:id="fieldSearch" ... />
<Button fx:id="buttonSearchUp" ... />
<Button fx:id="buttonSearchDown" ... />
<Label fx:id="labelMatches"/>

The Search Bar Buttons

<Button fx:id="buttonCloseSearch" styleClass="buttonSearchClose">
<FontAwesomeIconView styleClass="buttonSearchCloseIcon"/>
.buttonSearchCloseIcon {
-glyph-size: 15;
-glyph-name: CLOSE;
.buttonSearchClose, .buttonSearchUp, .buttonSearchDown {
-fx-background-color: transparent;
-fx-background-insets: 0;

The Search Field

<CustomTextField fx:id="fieldSearch" styleClass="searchField">
<Label styleClass="searchBoxLabel">
.searchBoxLabel {
-fx-padding: 0 2 0 7;
.searchBoxLabelIcon {
-glyph-size: 13;
-glyph-name: SEARCH;

Highlighting Errors

.searchField:fail {
-fx-background-color: -colour-search-fail;
private static final PseudoClass CLASS_FAIL
= PseudoClass.getPseudoClass("fail");

public static void updateStateClass(final Node node,
final boolean isFail) {
node.pseudoClassStateChanged(CLASS_FAIL, isFail);
searchModel.searchFailProperty().addListener((o, n, v) ->
SearchFieldClassTool.updateStateClass(fieldSearch, v));

Closing Words



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adam Carroll

Adam Carroll

I’m a Java software developer, based in Barcelona