rbx.lol

Dropdown

Pick one option, or several. Searchable, 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.

Live 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,
})
Live preview

My Script

v1.0

Rooms

Add a search box — worth it once the list passes about ten items:

Luau
main:Dropdown({
    Text = "Player",
    Options = playerNames,
    Search = true,
    SearchPlaceholder = "Find a player…",
    Callback = selectPlayer,
})

Selecting multiple#

Click a row to toggle it. Hold shift and click to select a whole range — and the range is added to what you already had, so shift never throws away your existing picks.

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 on the left. The clearest, and the default for multi.
fillA translucent accent background across the row
outlineAn accent border around the row

Every option#

OptionTypeDefaultWhat it does
Textreqstring—The label.
Optionsreqstring[]—The list to choose from.
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"check, fill or outline — how a selected row is drawn.
SearchbooleanfalseAdds a filter box inside the menu.
SearchPlaceholderstring—Ghost text for that filter box.
Placeholderstring—Shown when nothing is selected.
OpenbooleanfalseStart with the menu open.
Iconstring—An icon shown before the label.
Descriptionstring—A quieter second line.
HoverColorColor3—Overrides the row hover tint.
HoverFillnumber—How strongly a hovered row fills, 0 to 1.
Savestring—Persist the selection under this key.

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
SetOptions(list)Replaces the option list in place
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 = {},
    Search = true,
    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 would measure from — an anchor pointing at row 8 of a list that now has four rows would select a range that does not exist.