What is the Modern VBA ListBox

The ListBox is a control commonly used in VBA UserForms to create user interface-based applications. While it’s functional, the standard VBA ListBox dates back to the 1990s and lacks the advanced features found in modern web-based ListBoxes.

Enter the Modern VBA ListBox, a feature-rich upgrade designed to bridge that gap. It offers essential capabilities like filtering, sorting, pagination, and select/clear all, all while sporting a more visually appealing design than the outdated standard.

My goal in creating this was to provide a ListBox that anyone can easily add and configure, even with minimal technical expertise.

 

Download the Code

Download the code with a fully working demo from here

Compatibility

The Modern Listbox uses the new Worksheet Sort function, which requires either Office 365 or Excel 2021(or later).

The Video

 

How to Install the Modern ListBox

  1. Place the Modern Listbox AddIn.xlam file in a folder.  The normal folder for AddIns is “C:\Users\[YourUserNameHere]\AppData\Roaming\Microsoft\AddIns”. However, you can use another folder if you prefer.
  2. In Excel, go to the Developer Tab->Add Ins and then Excel Add-Ins. Click Browse, select the xlam file, and click OK. The AddIn is now available to use in any VBA project.

 

[Optional] Convert from Xlam to an Xlsm File

If you wish, you can use the “Modern ListBox” as a normal xlsm file. To “Convert” to an xlsm file you change a setting as follows:

  1. Open the VB Editor.
  2. In the project window, click on the ThisWorkbook module of the “Modern Listbox Addin.xlam” project.
  3. Open the properties window if it is not already open( View->Properties or F4).
  4. Change the IsAddin setting to false.
  5. Use File->SaveAs in Excel to save the file.

 

How to add the Modern ListBox to a VBA Project

  1. To use the “Modern Listbox” in a VBA project, you add a reference to it.
  2. In the VBE editor, select your VBA project in the project window(Note that if you have selected the Modern Listbox in the project window then the reference will not be available).
  3. Select Tools and then References from the menu, and place a check by “Modern ListBox” in the list.
  4. The Modern Listbox is now available to use in your project.

 

 

How to use the Modern ListBox

The Modern Listbox is used with a UserForm. To create a UserForm, go to the Visual Basic Editor (press Alt + F11), right-click on the project and select Insert and UserForm. Follow the instructions below to add the Modern Listbox to a UserForm.

 

Add to the UserForm

Create a Frame control on your UserForm and set it to the appropriate size. The ListBox will be built within the Frame.

Note that the Search box and Page numbers will be placed above and below the ListBox, respectively, so make sure to leave space for them.

 

Add the Code

Declare the ListBox variable at the top of the UserForm module

Private WithEvents m_modernListbox As clsModernListbox

 

Add the following code to the UserForm Initialize procedure

Private Sub UserForm_Initialize()

    ' Create the object
    Set m_modernListbox = Instantiate_clsModernListbox
    ' Assign to the frame on the UserForm
    Set m_modernListbox.parentFrame = FrameListBox

    ' Add data to the ListBox
    .List = shMovies.Range("A1:F5").Value

End Sub

 

Events

Events are procedures(i.e. subs) that are triggered when some Modern Listbox event occurs. You can use these subs to perform actions when a particular event occurs.

 

ItemSelected

Overview: This event is fired when an item is selected in the ListBox. Useful if you want to open another UserForm to update the current record.

Format: 

Private Sub modernListBox_ItemSelected(dataRow As Long)

Code example:

 Private WithEvents modernListbox As clsModernListbox

 Private Sub modernListBox_ItemSelected(dataRow As Long)

    MsgBox "The number of the row selected is: " & dataRow

    ' Retrieve data from the selected row
    Dim arr As Variant
    arr = m_modernListbox.GetRow(dataRow)

 End Sub

Note: the part of the sub name before the underline must match the variable name. In the example above it is modernListBox.

 

ItemDeselected

Overview: This event is fired when an item in the ListBox is double-clicked.

Format: 

Private Sub modernListBox_ItemDoubleClicked(dataRow As Long)

Code example:

 Private WithEvents modernListbox As clsModernListbox

 Private Sub modernListBox_ItemDeselected(dataRow As Long)

    MsgBox "The number of the row that was double-clicked is: " & dataRow

    ' Retrieve data from the deselected row
    Dim arr As Variant
    arr = m_modernListbox.GetRow(dataRow)

 End Sub

Note: the part of the sub name before the underline must match the variable name. In the example above it is modernListBox.

 

ItemDoubleClicked

Overview: This event is fired when an item is deselected in the ListBox.

Format: 

Private Sub modernListBox_ItemDeselected(dataRow As Long)

Code example:

 Private WithEvents modernListbox As clsModernListbox

 Private Sub modernListBox_ItemDoubleClicked(dataRow As Long)

    MsgBox "row number: "  & dataRow & " is no longer selected." 

    ' Retrieve data from the deselected row
    Dim arr As Variant
    arr = m_modernListbox.GetRow(dataRow)

 End Sub

Note: the part of the sub name before the underline must match the variable name. In the example above it is modernListBox.

Properties and Methods

This section covers the properties and methods of the ListBox

Methods are the Modern Listbox procedures and properties are the values.

 

AutomaticHeight

Overview: When set to true this automatically adjusts the Listbox height based on the recordsPerPage value.

Parameter:Set to True to enable automatic height adjustment; False to disable it.

Code example:

modernListbox.AutomaticHeight = True ' Turn on
modernListbox.AutomaticHeight = False ' Turn off

 

AutomaticWidth

Overview: When set to true this automatically adjusts the Listbox width based on the recordsPerPage value.

Parameter:Set to True to enable automatic width adjustment; False to disable it.

Code example:

modernListbox.AutomaticWidth = True ' Turn on
modernListbox.AutomaticWidth = False ' Turn off

 

Clear

Overview: Clears all data from the Listbox

Code example:

 modernListbox.Clear

 

ClearHover

Overview: Used to clear the hover highlight from the listbox. This is normally used when changing focus from the Listbox to another control.

Code example:

 modernListbox.ClearHover

 

ClearSelections

Overview: Clears the highlight from all selected rows

Code example:

 modernListbox.ClearSelections

 

ColumnCount

Overview: returns the number of columns in the ListBox

Code example:

 Dim columns As Long
 columns = modernListbox.ColumnCount

 

ColumnWidths

Overview: Sets the column widths

Parameters:  Accepts a semicolon-separated string of column widths.

Code example:

 modernListbox.columnWidths = "150;100;50;125;100;50"

 

GetRow

Overview: Retrieves the data in a given row.

Parameters

Index As Long:  Index is the row number of the data that you wish to retrieve. It should not be confused with the row number on the screen, which can be different.

Return type: Variant array

Code example:

 Dim rowData As Variant
 rowData = modernListbox.GetRow(1)

 

HeaderFieldsFromArray

Overview: Sets the text of the headers from a 2D array of strings. This is used to set the headers from a row in the spreadsheet.

Parameter:  Accepts a 2D array of strings. Note that the array is normally a row from the worksheet.

Code example:

.HeaderFieldsFromArray = Sheet1.Range("A1:H1").Value

 

HeaderFieldsFromString

Overview: Sets the text of the headers from a semi-colon separated string.

Parameter:  Accepts a semi-colon separated string of headers.

Code example:

.HeaderFieldsFromString = "Title;Director;Year;Genre;IMDb;Duration;Budget;Box Office"

 

Height

Overview: Gets or sets the height of the ListBox.

Parameter type:  Long

Code example:

 modernListbox.Height = 100
 Height = modernListbox.Height

 

HoverOn

Overview: Turns on or off the Hover highlight feature

Description: When enabled, any row the mouse cursor hovers over will be highlighted

Parameter type:  boolean

Code example:

 modernListbox.HoverOn =  True

 

List

Overview:  Sets the data for the ListBox

Parameter type:  2D variant array, which is equivalent to a spreadsheet range

Description: When this is used, the ListBox data fields are created and the data is displayed. If you’re setting options like recordsPerPage during ListBox creation, make sure to configure them before calling List to avoid rebuilding the ListBox.

 

Code example:

 ' Do all settings before using List to prevent the ListBox being built twice
 modernListbox.recordsPerPage =  10
 modernListbox.List =  Sheet1.Range("A1:F10").Value

 

MultiSelect

Overview:  Sets the selection type for the ListBox to either Single or Multi.

Parameter type: fmMultiSelect

Description:  The options for the fmMultiSelect parameter are fmMultiSelectExtend, fmMultiSelectMulti, or fmMultiSelectSingle.

For multi-select mode, use either fmMultiSelectMulti and fmMultiSelectExtend – there is no difference between them.

For single-select mode use fmMultiSelectSingle.

 

Code example:

 modernListbox.MultiSelect= fmMultiSelectSingle ' Single select mode

 modernListbox.MultiSelect= fmMultiSelectMulti  ' Multi select mode

 

ParentFrame

Overview: Assigns the ListBox to a frame on the UserForm

Parameter type: MSForms.Frame

Description: To create the ListBox, place a Frame on the UserForm. This Frame will act as the container for the ListBox control. Use the ParentFrame property to assign the ListBox to this Frame.

Code example:

modernListbox.ParentFrame = me.Frame1

 

RecordsPerPage

Overview: Sets the number of records to be displayed per page

Parameter type: Long

Description: The ListBox uses pagination to display a set number of records per page. Navigation buttons at the bottom of the ListBox allow users to move between pages. The RecordsPerPage property determines how many records are shown on each page.

Code example:

 modernListbox.RecordsPerPage = 10

 

ScrollBars

Overview: Returns or sets an Integer that specifies whether a control has vertical scroll bars, horizontal scroll bars, or both.

Parameter type: fmScrollBars

 

Constant Value Description
fmScrollBarsNone 0 Displays no scroll bars (default).
fmScrollBarsHorizontal 1 Displays a horizontal scroll bar.
fmScrollBarsVertical 2 Displays a vertical scroll bar.
fmScrollBarsBoth 3 Displays both a horizontal and a vertical scroll bar.

 

Code example:

 ' Displays Horizontial and Vertical Scrollbars
 modernListbox.ScrollBars = fmScrollBarsBoth

 ' No ScrollBars are displayed
 modernListbox.ScrollBars = fmScrollBarsNone

 

ScrollBarsSize

Sets the ScrollWidth size. This is the width in points that can be viewed within the control. This can only be used when the ScrollBar property is set to a value other than fmScrollBarsNone.

Code example:

 ' Sets the scroll bar width to 100
 modernListbox.ScrollBarSize = 100

 

SelectAll

Overview: Selects all the items in the ListBox

Code example:

 modernListbox.SelectAll

 

SelectedItem

Overview: Returns a variant array of the selected row with the data from all the columns in the row.

Note 1: This array can be written directly to the worksheet.

Note 2: This is a 2D array with 1 row.

Note 3: If there are multiple items selected, then this method will return the first selected item.

Code example:

 ' Selects record 5
 Dim data As Variant
 data = modernListbox.SelectedItem()
 Sheet1.Range("A1:F1").Value = data

 

SelectedItems

Overview: Returns a variant array of selected rows with all the data from all the columns in those rows.

Note that this array can be written directly to the worksheet.

Code example:

 Dim data As Variant
 data = modernListbox.SelectedItems()
 Sheet1.Range("A1:F6").Value = data

 

SelectedItemCount

Overview: Returns the number of items selected

Code example:

 Dim itemCount As Long
 itemCount = modernListbox.SelectedItemCount

 

SetSelected

Overview: Selects a record in the ListBox, highlighting it and triggering the ItemSelected event for that record. Note that a record can be selected even if it is on a different page and not currently visible on the screen.

Setting the turnedOn to false will turn off the remove the highlight from  the record.

Parameters:

Index As Long : The index is the row of the data to be selected. It should not be confused with the screen row, which may be different.

turnedOn As Boolean: Determines if the record is highlighted or not

 

Code example:

 ' Selects record 5
 modernListbox.SetSelected 5, True

 

Width

Overview: Gets or sets the width of the ListBox.

Parameter type:  Long

Code example:

 modernListbox.Width = 100
 Width = modernListbox.Width

 

Customizable Properties

The modern Excel VBA listbox includes a variety of properties that you can use to customize its appearance and behavior. While some properties are more advanced and control how the listbox functions, the ones listed below are mainly focused on visual styling. These cosmetic settings let you adjust things like fonts, colors, and layout so the listbox fits the look and feel you want.

 

Font Properties – Data Rows

Property Name Description
dataFontColor Sets the text color for the main listbox data rows.
dataFontName Sets the font family (e.g., Arial, Calibri) for data row text.
dataFontSize Sets the font size for the data row text.

 

️ Column Header Styling

Property Name Description
columnHeaderBackgroundColor Sets the background color of the column header area.
columnHeaderFontColor Sets the font color for the column headers.
columnHeaderFontName Sets the font family for the column headers.
columnHeaderFontSize Sets the font size for the column header text.

 

️ Interaction Colors

Property Name Description
rowSelectionColor Sets the background color of the currently selected row.
hoverColorRow Sets the background color of a row when hovered over.
hoverColorheader Sets the background color of the header when hovered over.

 

Listbox Layout

Property Name Description
listboxBackgroundColor Sets the background color of the entire listbox control.

 

Search Box Styling

Property Name Description
searchBoxLabelFontName Sets the font for the search label text (e.g., “Search:”).
searchBoxLabelFontSize Sets the font size of the search label text.
searchBoxFontName Sets the font family for the user-entered search text.
searchBoxFontSize Sets the font size for the user-entered search text.

 

What’s Next?

If you found the Modern ListBox useful, you may want to check out the Searchable Dropdown …