rbx.lol

Dropdown

Pick one option, or several, with three selection styles.

The smallest dropdown#

Luau
main:Dropdown({
    Text = "Target mode",
    Options = { "Nearest", "Lowest HP", "Random" },
    Callback = function(choice)
        targetMode = choice
    end,
})

choice is the selected string.

Preview

My Script

v1.0

Mode

Building it up#

Pick a starting option:

Luau
main:Dropdown({
    Text = "Target mode",
    Options = { "Nearest", "Lowest HP", "Random" },
    Default = "Nearest",
    Callback = setTargetMode,
})

Let the user choose several. Callback now receives an array:

Luau
main:Dropdown({
    Text = "Targets",
    Multi = true,
    Options = { "Nearest", "Lowest HP", "Highest HP", "Random" },
    Default = { "Nearest" },
    Callback = function(list)
        print(table.concat(list, ", "))
    end,
})
Preview

My Script

v1.0

Rooms

The menu itself has no filter box. Section search filters the rows on a page, not the options inside a menu, so shorten a long list yourself with SetOptions.

Selecting multiple#

Click a row to toggle it. Hold shift and click to select a range. The range is added to the current selection rather than replacing it.

Three styles decide how a selected row looks:

Luau
main:Dropdown({ Text = "Rooms", Multi = true, Style = "check",   Options = rooms })
main:Dropdown({ Text = "Rooms", Multi = true, Style = "fill",    Options = rooms })
main:Dropdown({ Text = "Rooms", Multi = true, Style = "outline", Options = rooms })
StyleSelected rows get
checkA tick box at the right-hand end of the row. The default.
fillA translucent accent background, plus an accent bar down the left edge
outlineAn accent border around the row

A multi-select is marked whichever style you pick. A single-select is marked only when you set Style yourself.

Every option#

OptionTypeDefaultWhat it does
Textreqstring—The label.
Optionsreqstring[]—The list to choose from. Duplicates are dropped.
Callbackfunction—Receives a string, or an array of strings when Multi is set.
Defaultstring | string[]—Starting selection. Use an array when Multi is set.
MultibooleanfalseAllow more than one selection.
Stylestring"check"How a selected row is drawn: check, fill or outline. Any other name warns and falls back to check.
Placeholderstring—Shown when nothing is selected. Defaults to Select, or None when Multi is set.
OpenbooleanfalseStart with the menu open.
Iconstring—An icon shown before the label.
Descriptionstring—A quieter second line.
HoverColorColor3 | string—The border and chevron colour on hover, or a theme role name.
HoverFillColor3 | string—The colour the button fills with on hover, or a theme role name. Defaults to the hover role.
Savestring | boolean—Persist the selection under this key. true derives one from the section and label.
Tooltipstring—Shown while the pointer is over the control.
DisabledbooleanfalseRefuses input and dims the control.
DisabledReasonstring—Shown as a tooltip while it is disabled.

Methods#

MethodWhat it does
Get()The current value: a string, or an array when Multi
Set(value)Selects a value or list of values, and fires Callback. Returns false, reason if a value is not in Options
SetOptions(list)Replaces the option list in place. Fires Callback if the selection changed; pass true as a second argument to suppress that
Open() / Close() / IsOpen()Controls the menu
Show() / Hide() / SetVisible(bool)Shows or hides the whole control
Destroy()Removes it from the page

Rebuilding the list at runtime#

A player list changes constantly. SetOptions swaps the contents without rebuilding the control:

Luau
local target = main:Dropdown({
    Text = "Target player",
    Options = {},
    Callback = setTarget,
})
 
local function refreshPlayers()
    local names = {}
    for _, player in ipairs(game.Players:GetPlayers()) do
        table.insert(names, player.Name)
    end
    target:SetOptions(names)
end
 
game.Players.PlayerAdded:Connect(refreshPlayers)
game.Players.PlayerRemoving:Connect(refreshPlayers)
refreshPlayers()

SetOptions clears the shift anchor

Swapping the list resets where a shift-range measures from. An anchor pointing at row 8 of a list that now has four rows would select a range that does not exist.