Segmented control

A pill track of options with a count each, where the selected one lifts as a white segment; stores the choice in one context variable.

Overview

A segmented control in the style of iOS and Fluent: a light grey track with the options side by side, where the selected option lifts out as a white segment with a soft shadow. Each option shows a count, and a caption below repeats the choice in words.

The choice is stored in locSegmentedControlValue. Until someone picks an option it falls back to "This week"; to start on another option, change that text in the formulas or set the variable in the screen's OnVisible. The options share the track's width, so the control stretches with its container up to 520 pixels.

When to use

Switching between two to five views or filters of the same list, such as due today, this week and overdue.
Short labels of one or two words.

When not to use

Navigating between sections with different content: use a tab bar.
More than five options, or options people pick in a form: use a dropdown or radio group.

Before you paste

Something that uses the choice, for example a gallery with Items: =Filter(Inspections, DueBucket = Coalesce(locSegmentedControlValue, "This week")).

Controls used

Control	Version
GroupContainer	`1.5.0`
ModernText	`1.0.0`
Gallery	`2.15.0`
ModernButton	`1.0.0`

YAML

Works as is, with example data inline. Paste it into a screen or container; the steps are underHow to paste.

Not yet verified in Power Apps Studio. The control versions are drafted from documentation. If Studio flags one, see How to paste for the fix.

component.yaml

- SegmentedControlRoot:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      DropShadow: =DropShadow.None
      Height: =SegmentedControlLabel.Height + SegmentedControlTrack.Height + SegmentedControlCaption.Height + 2 * 6 + 32
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =6
      PaddingBottom: =16
      PaddingLeft: =16
      PaddingRight: =16
      PaddingTop: =16
      Width: =Min(520, Parent.Width)
    Children:
      - SegmentedControlLabel:
          Control: ModernText@1.0.0
          Properties:
            AccessibleLabel: =Self.Text
            AlignInContainer: =AlignInContainer.Stretch
            FontWeight: =FontWeight.Semibold
            Height: =22
            LayoutMinHeight: =0
            LayoutMinWidth: =80
            PaddingBottom: =0
            PaddingLeft: =2
            PaddingTop: =0
            Size: =13
            Text: ="Due"
            Wrap: =false
      - SegmentedControlTrack:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            Fill: =ColorFade(App.Theme.Colors.Darker70, 92%)
            FillPortions: =0
            Height: =44
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutMinHeight: =44
            LayoutMinWidth: =120
            PaddingBottom: =4
            PaddingLeft: =4
            PaddingRight: =4
            PaddingTop: =4
            RadiusBottomLeft: =12
            RadiusBottomRight: =12
            RadiusTopLeft: =12
            RadiusTopRight: =12
          Children:
            - SegmentedControlGallery:
                Control: Gallery@2.15.0
                Variant: Horizontal
                Properties:
                  AccessibleLabel: =SegmentedControlLabel.Text
                  BorderThickness: =0
                  FillPortions: =1
                  Height: =36
                  Items: |
                    =Table(
                        {Value: "Today", Count: 3},
                        {Value: "This week", Count: 9},
                        {Value: "This month", Count: 24},
                        {Value: "Overdue", Count: 2}
                    )
                  LayoutMinHeight: =36
                  LayoutMinWidth: =120
                  ShowScrollbar: =false
                  TabIndex: =0
                  TemplatePadding: =0
                  TemplateSize: =Self.Width / Max(1, Self.AllItemsCount)
                Children:
                  - SegmentedControlSegment:
                      Control: GroupContainer@1.5.0
                      Variant: ManualLayout
                      Properties:
                        DropShadow: =If(ThisItem.Value = Coalesce(locSegmentedControlValue, "This week"), DropShadow.Light, DropShadow.None)
                        Fill: =If(ThisItem.Value = Coalesce(locSegmentedControlValue, "This week"), Color.White, Color.Transparent)
                        Height: =Parent.TemplateHeight
                        RadiusBottomLeft: =9
                        RadiusBottomRight: =9
                        RadiusTopLeft: =9
                        RadiusTopRight: =9
                        Width: =Parent.TemplateWidth
                        X: =0
                        Y: =0
                  - SegmentedControlOption:
                      Control: ModernButton@1.0.0
                      Properties:
                        AccessibleLabel: =ThisItem.Value & ", " & ThisItem.Count & If(ThisItem.Value = Coalesce(locSegmentedControlValue, "This week"), ", selected", "")
                        Appearance: =ButtonAppearance.Transparent
                        Color: =If(ThisItem.Value = Coalesce(locSegmentedControlValue, "This week"), App.Theme.Colors.Darker70, ColorFade(App.Theme.Colors.Darker70, 35%))
                        FontWeight: =If(ThisItem.Value = Coalesce(locSegmentedControlValue, "This week"), FontWeight.Semibold, FontWeight.Normal)
                        Height: =Parent.TemplateHeight
                        OnSelect: |
                          =UpdateContext({locSegmentedControlValue: ThisItem.Value})
                        Size: =13
                        Text: =ThisItem.Value & "  " & ThisItem.Count
                        Width: =Parent.TemplateWidth
                        X: =0
                        Y: =0
      - SegmentedControlCaption:
          Control: ModernText@1.0.0
          Properties:
            AccessibleLabel: =Self.Text
            AlignInContainer: =AlignInContainer.Stretch
            Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
            Height: =24
            LayoutMinHeight: =0
            LayoutMinWidth: =80
            PaddingBottom: =0
            PaddingLeft: =2
            PaddingTop: =0
            Size: =13
            Text: |
              =With({s: LookUp(SegmentedControlGallery.AllItems, Value = Coalesce(locSegmentedControlValue, "This week"))}, s.Count & " inspections due " & Lower(s.Value))
            Wrap: =false

Make it yours

The example runs on sample data. Replace these properties to connect it to your app.

`Items` on `SegmentedControlGallery`

The options, two to five. Count is shown next to the label; drop it from the button's Text if you don't need it.

In the YAML

YAML

Items: |
  =Table(
      {Value: "Today", Count: 3},
      {Value: "This week", Count: 9},
      {Value: "This month", Count: 24},
      {Value: "Overdue", Count: 2}
  )

Your version

YAML

Items: |
  =Table(
      {Value: "Today", Count: CountRows(Filter(Inspections, 'Due date' = Today()))},
      {Value: "This week", Count: CountRows(Filter(Inspections, 'Due date' >= Today(), 'Due date' < Today() + 7))},
      {Value: "Overdue", Count: CountRows(Filter(Inspections, 'Due date' < Today(), Status <> "Done"))}
  )

`Text` on `SegmentedControlLabel`

What the options choose between.

In the YAML

YAML

Text: ="Due"

Your version

YAML

Text: ="Show"

How to paste

Open your app in Power Apps Studio.
Check that modern controls are on: Settings → Updates → Modern controls and themes. In newer environments they are on by default.
Copy the YAML with the Copy button above the code.
In the Tree view, select the screen or container that should hold the component and press Ctrl+V. The whole component arrives as one container, SegmentedControlRoot, with all its controls inside.
Work through Make it yours to swap the example data for your own.

Where your version of Studio has a code view for a control or screen, you can paste the same YAML there instead of into the tree view.

When Studio flags a control version

Each control in the YAML names its version, like Control: ModernButton@1.0.0. If that version is newer than what your environment knows, Studio falls back to the version it has or flags the control. All controls of one type in an app must also use the same version, so an app that already has an older ModernButton can reject the paste. To fix it, insert the same control from the Insert pane, copy it as code, note the version on its Control: line, update every matching line in the YAML and paste again.

Missing a component, or did this one not paste cleanly? Suggest a component or report an issue.

Segmented control

Overview

When to use

When not to use

Before you paste

Controls used

YAML

Make it yours

Items on SegmentedControlGallery

Text on SegmentedControlLabel

How to paste

When Studio flags a control version

`Items` on `SegmentedControlGallery`

`Text` on `SegmentedControlLabel`