Power Apps modern controls
How the modern control set in canvas apps differs from classic controls — Fluent UI styling, accessibility defaults, theming, and migration considerations.
For years, canvas app controls looked like a 2015 web UI — functional but visually dated. The modern controls set, generally available since 2023 and expanding through 2024–2026, replaces the classic controls with Fluent UI–based components that match the look and feel of Microsoft 365. They're not just prettier; they have stricter accessibility defaults, better theming support, and a more constrained API surface.
The dual control sets. Both classic and modern controls coexist in the editor. Picking between them per control:
- Modern controls appear in the "Modern" toolbox section.
- Classic controls remain available for backwards compatibility.
A canvas app can mix both — but uniformity is preferable for UX coherence.
What's available in modern.
- Modern Button — primary, default, accent styles.
- Modern Text — typography levels (Title, Subtitle, Body, Caption).
- Modern Text Input — single-line, multi-line, password.
- Modern Dropdown — replaces the classic dropdown.
- Modern Combobox — searchable selection.
- Modern Date Picker — calendar-driven date selection.
- Modern Toggle — Boolean switch.
- Modern Slider — value range.
- Modern Checkbox / Radio Group.
- Modern Spinbutton, Rating, Tab list, Pivot, Persona — growing list.
The set covers most form scenarios. Less common controls (image, gallery, chart) still use classic.
Visual differences.
- Fluent UI typography and spacing — matches Office apps.
- Less skeumorphism, more flat — clean affordances.
- Default colour palette tied to theme — colour follows theme not hard-coded values.
Theming. Modern controls support App-level theme:
- Primary colour, neutral colour, font family.
- Dark/light mode (in development).
- Per-control overrides remain possible but rare.
Setting the theme once cascades through all modern controls. Classic controls don't pick up theme automatically — each control needs explicit colour-binding.
Accessibility.
- Keyboard navigation out of the box.
- Screen reader semantics aligned with WAI-ARIA.
- Focus rings visible.
- Colour contrast meets WCAG AA defaults.
Classic controls require manual accessibility tuning per control; modern controls bake in baseline accessibility.
Properties differ. Modern controls have a leaner property set than classic. Some advanced classic properties (font weight, hover colour, micro-positioning) aren't directly exposed — the theming handles them. For makers used to tweaking every property, this is a constraint; for shipping consistent UIs, it's a feature.
Performance. Modern controls are React-based; the rendering layer is more efficient. Apps with hundreds of controls render measurably faster on modern. The improvement is most visible in galleries and forms with many child controls.
Migration considerations.
- No automatic conversion — adding a modern control next to an existing classic control means manual property re-binding.
- Property names may differ — e.g.,
TextvsContent,OnSelectvsOnClickfor some controls. - Custom CSS / DOM manipulation — there isn't any in canvas apps generally, but classic-era hacks via HTML Text controls don't carry over cleanly.
Mixed apps. Some legacy apps will have classic controls forever. Pattern: build new screens in modern; leave existing screens classic. Don't force a wholesale conversion mid-cycle unless the visual divergence is a problem.
When classic is still right.
- Highly customised visuals — classic exposes more knobs.
- Tight backwards compatibility with existing app patterns.
- Specific control types not yet in modern.
Common pitfalls.
- Mixing classic and modern on one screen — looks visually inconsistent.
- Custom theming not propagated — setting per-control colours instead of theme defeats the consistency benefit.
- Accessibility regressions — overriding modern defaults to "match" classic loses the accessibility wins.
- Property mapping errors — converting an app screen-by-screen and missing event handlers.
Operational rule. All new canvas apps default to modern controls. App theming set early in development. Existing apps converted to modern when there's a refresh budget — not as forced churn. The visual and accessibility gains compound over the app lifetime; the upfront learning curve is small.
Related guides
- PCF controls in Power AppsWhat Power Apps Component Framework (PCF) controls are, when to use them, and the developer toolchain to build, package, and deploy.
- Power Apps Component Framework (PCF) control developmentHow to build custom controls with the Power Apps Component Framework — the dev environment, lifecycle, manifest, packaging, and the common pitfalls for production PCFs.
- Power Apps monitoring and Application InsightsHow to monitor Power Apps in production — App Monitor, Application Insights integration, and the operational patterns for performance and error tracking.
- Power Apps performance tuningHow to make Power Apps canvas and model-driven apps fast — startup time, screen render, data fetching, formula optimisation, and the patterns that matter.
- Power Apps Portals history and rebranding to Power PagesFrom ADXStudio to Dynamics 365 Portals to Power Apps Portals to Power Pages — the product genealogy and what the rebranding means for customers.