Skip to content

MultiSelect

MultiSelect works like Select, but the user can choose more than one option. It shows the choices as chips or as a count.

Usage

Call Components.MultiSelect with a scope and a table of properties:

C.MultiSelect(scope, {
    Label = "Tags",
    Options = {
        { Value = "ui", Label = "UI" },
        { Value = "net", Label = "Networking" },
    },
    Display = "Count",
    OnChanged = function(values)
        print(#values, "selected")
    end,
})

Properties

Name Type Required Default Description
Theme ThemeRef ❌ The contextual theme Theme to use for this component instead of the one from Theme.Provide.
LayoutOrder UsedAs<number> ❌ 0 Position in a parent UIListLayout or UIGridLayout.
Size UsedAs<UDim2> ❌ - Size of the component.
ZIndex UsedAs<number> ❌ - Z index of the component.
Options { SelectOption } ✅ - The options, each with a Value and a Label.
Value UsedAs<{ string }> ❌ {} The list of chosen values. A plain list is only the starting choice. A Value stays in step with the control: the user's changes set it, and setting it changes the control.
Placeholder UsedAs<string> ❌ "Select…" Text to show while nothing is chosen.
Label UsedAs<string> ❌ - Label above the field.
Disabled UsedAs<boolean> ❌ - Stops the field opening. The component reads this once, when it creates the field.
Validators { Validator } ❌ - Validators to run on the list of chosen values.
Display "Chips" \| "Count" ❌ "Chips" "Chips" shows a chip for each choice. "Count" shows how many choices there are.
Id string ❌ - Key that identifies this component when state is kept across rebuilds. See Persist.

Callbacks

Name Description
OnChanged: ({ string }) -> () Runs with the new list of values each time the choice changes.

See also