SegmentedControl

SegmentedControl is a row of options. The user chooses one. A pill slides and stretches to the chosen segment, like the control on iOS.

Usage

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

C.SegmentedControl(scope, {
    Items = {
        { Id = "day", Label = "Day" },
        { Id = "week", Label = "Week" },
    },
    Selected = "day",
    OnChanged = function(id)
        print("Showing", id)
    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.
Visible	UsedAs<boolean>		true	Whether the component is shown.
ZIndex	UsedAs<number>		-	Z index of the component.
Items	{ { Id: string, Label: string, Icon: string? } }		-	The segments. Each has an Id, a Label and an optional Lucide Icon.
Selected	UsedAs<string>		The first item	Id of the chosen segment. A plain value is only the starting segment. A Value stays in step with the control: the user's changes set it, and setting it changes the control.
Disabled	UsedAs<boolean>		false	Stops the control reacting to input. The component reads this once, when it creates the control.
Id	string		-	Key that identifies this component when state is kept across rebuilds. See Persist.

Callbacks

Name	Description
OnChanged: (string) -> ()	Runs with the Id of the segment the user chose.

See also

• Tabs
• ChoiceGroup