How to Create Tabs in Power Apps [Using Modern Tab List]

If you’ve built a Power Apps form connected to a SharePoint list and it just keeps scrolling down forever — you know the pain. Users hate it. Tabs fix that instantly.

In this tutorial, I’ll show you exactly how to create tabs in Power Apps, walk you through a real example with a SharePoint list, and explain the two most popular approaches you can use today. By the end, you’ll have a fully working tabbed form.

Why Use Tabs in Power Apps?

Let’s say you’re building an employee onboarding form. It has 25+ fields — personal info, job details, emergency contacts, documents. Dumping all of that on one scrolling screen is a nightmare.

Tabs let you break the form into logical sections. Users click a tab, see only the relevant fields, and move on. Clean, fast, easy.

Here are a few common use cases:

• Multi-section forms — Group related fields so users aren’t overwhelmed
• Dashboard views — Show different data tables under different categories (e.g., Open, In Progress, Closed)
• App navigation — Use tabs as a top or side navigation menu

Two Ways to Create Tabs in Power Apps

There are two main approaches:

1. Using the Modern Tab List Control — The newer, cleaner way. Available if you’ve enabled Modern Controls in your app settings.
2. Using Buttons + a Variable — The classic approach. Works in any Canvas app without any extra settings.

I’ll cover both. If you’re starting a new app today, go with the Modern Tab List. If you’re working on an existing app or want full control over styling, the button method still works great.

How to Create Tabs in Power Apps

I’m going to build an Employee Profile Form connected to a SharePoint list. The form will have four tabs:

• General — Name, Job Title, Department
• Contact Info — Email, Phone, Mobile
• Location — Office, City, Country
• Notes — Additional notes

This is a real-world scenario most of us run into all the time.

Step 1: Set Up Your SharePoint List

First, create a SharePoint list called Employee Profiles with the following columns. All are Single line of text unless mentioned otherwise:

• Title (default — use this for employee name)
• JobTitle
• Department
• EmailAddress
• OfficePhone
• MobilePhone
• OfficeLocation
• City
• Country
• AdditionalNotes (Multi-line text)

Go to your SharePoint site → New List → Give it a name → Add the columns above.

Method 1: Using the Modern Tab List Control

This is my preferred approach for new apps. Microsoft introduced the Modern Controls in 2023, and the Tab List control is one of the best additions.

Step 2: Enable Modern Controls

1. Open make.powerapps.com
2. Create a new Canvas App from blank (Tablet layout works best here)
3. Go to Settings → Upcoming Features → Experimental
4. Toggle on Modern controls and themes
5. Close settings

Once enabled, you’ll see a “Modern” section when you insert controls.

Step 3: Insert the Tab List Control

1. Go to Insert in the top menu
2. Search for Tab List (or find it under the Modern controls section)
3. Drop it at the top of your screen
4. Resize it to span the full width

Step 4: Set the Items Property

Click the Tab List control and go to the Items property in the formula bar. Replace whatever’s there with this:

["General", "Contact Info", "Location", "Notes"]

You should now see four tabs appear in the control.

Step 5: Set a Default Tab

To make sure a tab is always selected when the screen loads, click the Tab List and set its DefaultSelectedItems property to:

{Value: "General"}

This ensures “General” is highlighted when someone opens the form.

Step 6: Add the Form and Connect to SharePoint

1. Go to Insert → Edit Form
2. In the right panel, select your EmployeeProfiles SharePoint list as the data source
3. Add all the fields you created
4. Set the form layout to 1 Column

Step 7: Show/Hide Fields Based on the Selected Tab

This is the heart of the whole thing. Each form field (DataCard) needs to know when to show itself.

Click the General tab fields — that’s the Title, JobTitle, and Department DataCards. Set the Visible property of each to:

TabList.Selected.Value = "General"

For the Contact Info fields (EmailAddress, OfficePhone, MobilePhone):

TabList.Selected.Value = "Contact Info"

For Location fields (OfficeLocation, City, Country):

TabList.Selected.Value = "Location"

For Additional Notes:

TabList.Selected.Value = "Notes"

That’s it. Click each tab — the relevant fields show, the rest hide.

Step 8: Add a Submit Button

Insert a Power Apps Button at the bottom of the screen. Set its Text to “Save” and put this in the OnSelect property:

SubmitForm(Form1);
Notify("Record saved successfully!", NotificationType.Success)

You now have a fully functional tabbed form using the Modern Tab List control.

Method 2: Using Buttons + a Variable (Classic Approach)

This method works in any Canvas app — no need to enable modern controls. I use this when I need pixel-perfect styling or when working on an existing app.

Step 2: Create a Variable to Track the Active Tab

The entire logic here depends on one thing — a variable that stores which tab is currently selected.

Go to the OnVisible property of your screen and add:

Set(varCurrentTab, "General")

This sets “General” as the default tab whenever the screen loads.

Step 3: Add Tab Buttons

Insert 4 Button controls and position them side by side near the top of the screen. Set their Text properties to:

• "General"
• "Contact Info"
• "Location"
• "Notes"

Step 4: Set the OnSelect for Each Button

On each button’s OnSelect property, write:

Set(varCurrentTab, Self.Text)

This updates the variable to match whichever tab the user clicked.

Step 5: Style the Active Tab

You want the selected tab to look different from the others. Use this in the Fill property of each button:

If(varCurrentTab = Self.Text, RGBA(0, 120, 212, 1), RGBA(255, 255, 255, 0))

And for Color (text color):

If(varCurrentTab = Self.Text, White, RGBA(0, 0, 0, 1))

Now the active tab turns blue with white text. The others stay transparent.

Step 6: Add a Visual Underline Indicator (Optional but Nice)

Insert a thin Label (set Height to 4–5 px) just below the buttons with a white or colored fill. In its X property, write:

Switch(
    varCurrentTab,
    "General", btn_General.X,
    "Contact Info", btn_ContactInfo.X,
    "Location", btn_Location.X,
    "Notes", btn_Notes.X
)

This little underline slides to whichever tab is active. It’s a small detail, but it makes the UI feel polished.

Step 7: Connect the Form and Control Visibility

Same as before — insert an Edit Form, connect it to your EmployeeProfiles SharePoint list, and then set the Visible property on each DataCard:

For General fields:

varCurrentTab = "General"

For Contact Info fields:

varCurrentTab = "Contact Info"

For Location fields:

varCurrentTab = "Location"

For Notes:

varCurrentTab = "Notes"

Step 8: Save the Form

Add a Submit button and write this in OnSelect:

SubmitForm(Form1)

Done. You’ve got a working tabbed form using the classic button approach.

Tab List Control Key Properties (Quick Reference)

Here’s a quick cheat sheet for the Modern Tab List control — handy when you’re building:

Property	What It Does
Items	The list of tab labels (array or column from a table)
DefaultSelectedItems	Which tab is selected by default
TabList1.Selected.Value	The currently selected tab’s text
OnChange	Formula that runs when the user switches tabs
Alignment	Horizontal or Vertical tabs
Size	Small, Medium, or Large tabs
BasePaletteColor	Override the theme color for the control

Common Mistakes to Avoid

A few things I’ve seen trip people up:

• Forgetting OnVisible — If you don’t set the default variable on screen load, no tab will be active when the form opens and all fields will be hidden
• Wrong DataCard Visible formula — Make sure you’re referencing the right variable name or the correct Tab List control name
• Form not connected to a data source — You’ll get a “form isn’t connected to any data yet” error if the DefaultMode isn’t set properly. Set the DefaultMode of your form to FormMode.New for new records or FormMode.Edit for editing
• Fields jumping around — When you set Visible = false, the field collapses but other fields don’t fill the gap automatically. Use a 1-column form layout and they’ll stack cleanly

Conclusion

Tabs in Power Apps aren’t complicated once you see the pattern. You’re basically just:

1. Tracking which tab is active (via a variable or the Tab List’s .Selected.Value)
2. Showing fields that belong to the active tab
3. Hiding everything else

Whether you go with the modern control or the classic button method, the result is the same — a cleaner, more usable form that your users will actually enjoy filling out.

Try building the Employee Profile example I walked through above. Once you’ve done it once, you’ll use tabs in almost every app you build.

Also, you may like:

• Power Apps Dropdown Show Only Unique Values
• Power Apps Refresh Function
• Set a Power Apps Dropdown Default Value from a SharePoint List
• Get Choice Field Value in Power Apps
• Confirm() Function in Power Apps