# Form factors and responsive component markup *Platform Developer II Study Guide · User Interface · Last updated October 16, 2026 · https://www.certifyforce.com/study-guide/platform-developer-ii/user-interface/form-factors-and-responsive-component-markup* Two layers decide what a phone, tablet or desktop user sees: supportedFormFactors in the LWC configuration file or Aura design resource decides whether a Lightning page renders the component at all, while @salesforce/client/formFactor, $Browser and lightning-layout device sizes decide how its markup adapts. - Certification: Salesforce Platform Developer II - Exam section: User Interface - Study guide: https://www.certifyforce.com/study-guide/platform-developer-ii **Official exam objective:** > Identify aspects of LWC or Aura Components that can cause a component's markup to display in a responsive manner based on form factor. ## What the exam expects - Restrict a Lightning web component or an Aura component to desktop, phone or both on a Lightning page type, and predict when a page drops it. - Know which page types support which form factors, and why a deployment that removes a form factor fails. - Render different markup per device inside one component: `@salesforce/client/formFactor` in LWC, `$Browser` in Aura. - Read `lightning-layout` and `lightning-layout-item` markup and work out each item's width on a phone, tablet and desktop. Key terms: **form factor** (the device class: `Large` desktop, `Medium` tablet, `Small` phone), **supportedFormFactors** (the configuration that tells a Lightning page on which devices to render the component), **global value provider** (an Aura expression source such as `$Browser`), **device-size attributes** (`small-`, `medium-` and `large-device-size` on a layout item), **mobile-first** (the base `size` applies first and larger devices override it). ## Key facts | Fact | Detail | Source | |---|---|---| | LWC form-factor tag | `` inside a `` of `.js-meta.xml` | [Configure Your Component for Different Form Factors](https://developer.salesforce.com/docs/platform/lwc/guide/use-config-form-factors.html) | | Aura form-factor tag | `` in the `.design` resource | [Aura Component Bundle Design Resources](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_app_builder_design_files.htm) | | Valid declaration values | `Large` (desktop) and `Small` (phone) | [Aura Component Bundle Design Resources](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_app_builder_design_files.htm) | | Page-type support | App and record pages: Large and Small; Home pages: Large only | [Configure Your Component for Different Form Factors](https://developer.salesforce.com/docs/platform/lwc/guide/use-config-form-factors.html) | | Omitted declaration | Component supports the form factors its page type supports | [Configure Your Component for Different Form Factors](https://developer.salesforce.com/docs/platform/lwc/guide/use-config-form-factors.html) | | Component in use on a page | Supported form factors can be increased, not decreased | [Configure Your Component for Different Form Factors](https://developer.salesforce.com/docs/platform/lwc/guide/use-config-form-factors.html) | | `@salesforce/client/formFactor` values | `Large` desktop, `Medium` tablet, `Small` phone | [Access Client Form Factor](https://developer.salesforce.com/docs/platform/lwc/guide/create-client-form-factor.html) | | `$Browser` in Aura | `formFactor`, `isPhone`, `isTablet`; markup expressions or `$A.get()` | [$Browser](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_browser_value_provider.htm) | | Device sizes need `size` | Setting any device-size attribute requires `size` too | [lightning-layout-item](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-layout-item.html?type=Develop) | | Device sizes are additive | Each applies to its device size and larger | [lightning-layout-item](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-layout-item.html?type=Develop) | | `multiple-rows` | Items wrap when they exceed the layout width; default false | [lightning-layout specification](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-layout.html?type=Specification) | ## Check yourself - Why does a component on a Home page never render on a phone, even when its configuration declares `Small`? - When is removing a form factor from a component's configuration rejected? - Which value does `@salesforce/client/formFactor` return on a tablet? - Why must an item that sets `medium-device-size` also set `size`? - How does an Aura component show different markup on phones without a second component? ## Sources - [Configure Your Component for Different Form Factors](https://developer.salesforce.com/docs/platform/lwc/guide/use-config-form-factors.html) - [Access Client Form Factor](https://developer.salesforce.com/docs/platform/lwc/guide/create-client-form-factor.html) - [Aura Component Bundle Design Resources](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_app_builder_design_files.htm) - [$Browser](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_browser_value_provider.htm) - [lightning-layout-item](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-layout-item.html?type=Develop) - [lightning-layout-item specification](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-layout-item.html?type=Specification) - [lightning-layout specification](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-layout.html?type=Specification) ## About the full unit The "Core concepts", "Exam traps" and "Worked scenario" sections of this unit, its 8 linked practice questions, and unlimited timed mock exams are included with the Platform Developer II pack (USD $19): https://www.certifyforce.com/practice-exams