--- title: Polaris web components api_version: 2025-10 api_name: checkout-ui-extensions source_url: html: https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components md: https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components.md --- # Polaris web components ## Actions [![Button](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/button-thumbnail-BfZnAuEe.png)![Button](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/button-thumbnail-BfZnAuEe.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/actions/button) [Button](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/actions/button) [The button component triggers actions or events, such as submitting forms, opening dialogs, or navigating to other pages.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/actions/button) [![Clickable](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/clickable-thumbnail-BRMP8BHA.png)![Clickable](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/clickable-thumbnail-BRMP8BHA.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/actions/clickable) [Clickable](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/actions/clickable) [The clickable component wraps content to make it interactive and clickable.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/actions/clickable) [![Clickable chip](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/clickable-chip-thumbnail-Ba_IS1uS.png)![Clickable chip](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/clickable-chip-thumbnail-Ba_IS1uS.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/actions/clickable-chip) [Clickable chip](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/actions/clickable-chip) [The clickable chip component displays interactive labels or categories that users can click or remove.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/actions/clickable-chip) [![Link](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/link-thumbnail-BaRvZ9N2.png)![Link](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/link-thumbnail-BaRvZ9N2.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/actions/link) [Link](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/actions/link) [The link component makes text interactive, allowing users to navigate to other pages or perform specific actions.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/actions/link) [![PressButton](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/press-button-thumbnail-BsATZaAo.png)![PressButton](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/press-button-thumbnail-BsATZaAo.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/actions/pressbutton) [Press​Button](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/actions/pressbutton) [Allows users to toggle between active/inactive states.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/actions/pressbutton) ## Feedback [![Announcement](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/announcement-thumbnail-DARYr6K-.png)![Announcement](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/announcement-thumbnail-DARYr6K-.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback/announcement) [Announcement](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback/announcement) [The Announcement component provides a less disruptive alternative to auto-open modals for capturing user attention.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback/announcement) [![Progress](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/progress-thumbnail-B43fiJD9.png)![Progress](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/progress-thumbnail-B43fiJD9.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback/progress) [Progress](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback/progress) [Displays an indicator showing the completion status of a task.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback/progress) [![SkeletonParagraph](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/skeleton-paragraph-thumbnail-C_eH5TVX.png)![SkeletonParagraph](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/skeleton-paragraph-thumbnail-C_eH5TVX.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback/skeletonparagraph) [Skeleton​Paragraph](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback/skeletonparagraph) [Displays a placeholder representation of text content while it loads.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback/skeletonparagraph) ## Feedback and status indicators [![Badge](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/badge-thumbnail-CY6oU4DH.png)![Badge](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/badge-thumbnail-CY6oU4DH.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback-and-status-indicators/badge) [Badge](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback-and-status-indicators/badge) [The badge component displays status information or indicates completed actions through compact visual indicators.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback-and-status-indicators/badge) [![Banner](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/banner-thumbnail-CGI0HHQn.png)![Banner](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/banner-thumbnail-CGI0HHQn.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback-and-status-indicators/banner) [Banner](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback-and-status-indicators/banner) [The banner component highlights important information or required actions prominently within the interface.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback-and-status-indicators/banner) [![Spinner](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/spinner-thumbnail-BDWF5bu8.png)![Spinner](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/spinner-thumbnail-BDWF5bu8.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback-and-status-indicators/spinner) [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback-and-status-indicators/spinner) [The spinner component displays an animated indicator showing users that content or actions are loading.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/feedback-and-status-indicators/spinner) ## Forms [![Checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/checkbox-thumbnail-Dc8KbyEv.png)![Checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/checkbox-thumbnail-Dc8KbyEv.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/checkbox) [Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/checkbox) [The checkbox component provides a clear way for users to make selections, such as agreeing to terms, enabling settings, or choosing multiple items from a list.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/checkbox) [![Choice list](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/choice-list-thumbnail-AaBvYPik.png)![Choice list](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/choice-list-thumbnail-AaBvYPik.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/choice-list) [Choice list](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/choice-list) [The choice list component presents multiple options for single or multiple selections.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/choice-list) [![ConsentCheckbox](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/consent-checkbox-thumbnail-Bobrtc7r.png)![ConsentCheckbox](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/consent-checkbox-thumbnail-Bobrtc7r.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/consentcheckbox) [Consent​Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/consentcheckbox) [Use buyer consent checkboxes for collecting the buyer’s approval for a given policy.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/consentcheckbox) [![ConsentPhoneField](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/consent-phone-field-thumbnail-ixRPV86k.png)![ConsentPhoneField](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/consent-phone-field-thumbnail-ixRPV86k.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/consentphonefield) [Consent​Phone​Field](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/consentphonefield) [Display a phone field for customers to sign up for text message marketing, noting that the phone field value will be automatically saved during checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/consentphonefield) [![Date field](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/date-field-thumbnail-T6C2Li4o.png)![Date field](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/date-field-thumbnail-T6C2Li4o.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/date-field) [Date field](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/date-field) [The date field component captures date input with a consistent interface for date selection and proper validation.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/date-field) [![Date picker](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/date-picker-thumbnail-BqAvVsRh.png)![Date picker](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/date-picker-thumbnail-BqAvVsRh.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/date-picker) [Date picker](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/date-picker) [The date picker component allows merchants to select dates using a calendar interface.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/date-picker) [![Drop zone](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/drop-zone-thumbnail-DaIYV0G2.png)![Drop zone](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/drop-zone-thumbnail-DaIYV0G2.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/drop-zone) [Drop zone](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/drop-zone) [The drop zone component lets users upload files through drag-and-drop or by clicking to browse.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/drop-zone) [![Email field](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/email-field-thumbnail-D010x2qt.png)![Email field](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/email-field-thumbnail-D010x2qt.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/email-field) [Email field](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/email-field) [The email field component captures email address input.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/email-field) [![Form](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/components/form-B0kMehyX.png)![Form](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/components/form-B0kMehyX.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/form) [Form](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/form) [The form component wraps form controls and enables implicit submission, allowing users to submit from any input by pressing **Enter**.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/form) [![Money field](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/money-field-thumbnail-Bb8GnkaJ.png)![Money field](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/money-field-thumbnail-Bb8GnkaJ.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/money-field) [Money field](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/money-field) [The money field component collects monetary values from users with built-in currency formatting and validation.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/money-field) [![Number field](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/number-field-thumbnail-CYoZRuz8.png)![Number field](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/number-field-thumbnail-CYoZRuz8.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/number-field) [Number field](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/number-field) [The number field component captures numeric input with built-in number validation.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/number-field) [![Password field](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/password-field-thumbnail-CNB0zR71.png)![Password field](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/password-field-thumbnail-CNB0zR71.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/password-field) [Password field](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/password-field) [The password field component securely collects sensitive information from users.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/password-field) [![PhoneField](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/phone-field-thumbnail-DIk-2zce.png)![PhoneField](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/phone-field-thumbnail-DIk-2zce.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/phonefield) [Phone​Field](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/phonefield) [Use PhoneField to allow users to enter phone numbers.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/phonefield) [![Select](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/select-thumbnail-C6qegx_e.png)![Select](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/select-thumbnail-C6qegx_e.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/select) [Select](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/select) [The select component allows users to choose one option from a dropdown menu.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/select) [![Switch](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/switch-thumbnail-Bp1WEwrj.png)![Switch](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/switch-thumbnail-Bp1WEwrj.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/switch) [Switch](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/switch) [The switch component provides a clear way for users to toggle options or settings on and off.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/switch) [![Text area](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/text-area-thumbnail-C05TfnLG.png)![Text area](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/text-area-thumbnail-C05TfnLG.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/text-area) [Text area](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/text-area) [The text area component captures multi-line text input.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/text-area) [![Text field](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/text-field-thumbnail-DU_Zc72d.png)![Text field](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/text-field-thumbnail-DU_Zc72d.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/text-field) [Text field](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/text-field) [The text field component captures single-line text input.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/text-field) [![URL field](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/url-field-thumbnail-D-kdH9F9.png)![URL field](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/url-field-thumbnail-D-kdH9F9.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/url-field) [URL field](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/url-field) [The URL field component collects URLs from users with built-in formatting and validation.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/forms/url-field) ## Interactive [![Details](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/details-thumbnail-ottKwVSH.png)![Details](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/details-thumbnail-ottKwVSH.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/interactive/details) [Details](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/interactive/details) [Creates a collapsible content area that can be expanded or collapsed by users.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/interactive/details) [![Map](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/map-thumbnail-BGau5KHO.png)![Map](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/map-thumbnail-BGau5KHO.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/interactive/map) [Map](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/interactive/map) [Use Map to display a map on a page.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/interactive/map) ## Layout and structure [![Box](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/box-thumbnail-ccy-RH7a.png)![Box](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/box-thumbnail-ccy-RH7a.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/box) [Box](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/box) [The box component provides a generic, flexible container for custom designs and layouts.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/box) [![Divider](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/divider-thumbnail-BRYBrdo5.png)![Divider](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/divider-thumbnail-BRYBrdo5.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/divider) [Divider](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/divider) [The divider component creates clear visual separation between elements in the interface.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/divider) [![Grid](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/grid-thumbnail-CG_HRlB3.png)![Grid](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/grid-thumbnail-CG_HRlB3.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/grid) [Grid](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/grid) [The grid component organizes content in a matrix of rows and columns to create responsive page layouts.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/grid) [![Ordered list](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/ordered-list-thumbnail-C8dDO3g2.png)![Ordered list](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/ordered-list-thumbnail-C8dDO3g2.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/ordered-list) [Ordered list](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/ordered-list) [The ordered list component displays a numbered list of related items in a specific sequence.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/ordered-list) [![Query container](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/components/page-ZjQ0PRv6.png)![Query container](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/components/page-ZjQ0PRv6.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/query-container) [Query container](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/query-container) [The query container component establishes a container query context for responsive design.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/query-container) [![Section](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/section-thumbnail-BPccSm6Y.png)![Section](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/section-thumbnail-BPccSm6Y.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/section) [Section](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/section) [The section component groups related content into clearly-defined thematic areas with consistent styling and structure.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/section) [![Stack](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/stack-thumbnail-CGHqNUgm.png)![Stack](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/stack-thumbnail-CGHqNUgm.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/stack) [Stack](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/stack) [The stack component organizes elements horizontally or vertically along the block or inline axis.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/stack) [![Unordered list](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/unordered-list-thumbnail-CRa9rsI1.png)![Unordered list](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/unordered-list-thumbnail-CRa9rsI1.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/unordered-list) [Unordered list](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/unordered-list) [The unordered list component displays a bulleted list of related items where sequence isn't critical.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/layout-and-structure/unordered-list) ## Media [![PaymentIcon](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/payment-icon-thumbnail-BnrdgC3i.png)![PaymentIcon](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/payment-icon-thumbnail-BnrdgC3i.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/media/paymenticon) [Payment​Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/media/paymenticon) [Displays icons representing payment methods.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/media/paymenticon) [![ProductThumbnail](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/product-thumbnail-thumbnail-CmnlDrNe.png)![ProductThumbnail](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/product-thumbnail-thumbnail-CmnlDrNe.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/media/productthumbnail) [Product​Thumbnail](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/media/productthumbnail) [Use ProductThumbnail to display a product thumbnail](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/media/productthumbnail) ## Media and visuals [![Icon](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/icon-thumbnail-BVg7ao9W.png)![Icon](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/icon-thumbnail-BVg7ao9W.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/media-and-visuals/icon) [Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/media-and-visuals/icon) [The icon component renders graphic symbols to visually communicate actions, status, and navigation throughout the interface.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/media-and-visuals/icon) [![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/image-thumbnail-6cA3jBoq.png)![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/image-thumbnail-6cA3jBoq.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/media-and-visuals/image) [Image](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/media-and-visuals/image) [The image component embeds images within the interface with control over presentation and loading behavior.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/media-and-visuals/image) ## Other [![QRCode](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/qr-code-thumbnail-DNJ5WgA-.png)![QRCode](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/qr-code-thumbnail-DNJ5WgA-.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/other/qrcode) [QR​Code](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/other/qrcode) [Displays a scannable QR code representing data such as URLs or text.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/other/qrcode) ## Overlays [![Modal](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/modal-thumbnail-D5PNMNOH.png)![Modal](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/modal-thumbnail-D5PNMNOH.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/overlays/modal) [Modal](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/overlays/modal) [Displays content in an overlay.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/overlays/modal) [![Popover](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/popover-thumbnail-BxvF9pDV.png)![Popover](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/popover-thumbnail-BxvF9pDV.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/overlays/popover) [Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/overlays/popover) [Popovers are used to display content in an overlay that can be triggered by a button.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/overlays/popover) [![Sheet](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/sheet-thumbnail-B5PxIfKq.png)![Sheet](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/sheet-thumbnail-B5PxIfKq.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/overlays/sheet) [Sheet](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/overlays/sheet) [The Sheet component displays essential information for customers at the bottom of the screen, appearing above other elements.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/overlays/sheet) ## Structure [![ScrollBox](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/scroll-box-thumbnail-11IGxt0S.png)![ScrollBox](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/scroll-box-thumbnail-11IGxt0S.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/structure/scrollbox) [Scroll​Box](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/structure/scrollbox) [Provides a scrollable container for long content that exceeds the available space.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/structure/scrollbox) ## Typography and content [![Abbreviation](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/abbreviation-thumbnail-BiXI2eyD.png)![Abbreviation](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/abbreviation-thumbnail-BiXI2eyD.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/abbreviation) [Abbreviation](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/abbreviation) [Displays abbreviated text or acronyms, revealing their full meaning or additional context through a tooltip on hover or focus.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/abbreviation) [![Chip](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/chip-thumbnail-Dm3qc2FJ.png)![Chip](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/chip-thumbnail-Dm3qc2FJ.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/chip) [Chip](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/chip) [The chip component displays static labels, categories, or attributes that help classify and organize content.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/chip) [![Heading](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/heading-thumbnail-kUJ6RcQy.png)![Heading](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/heading-thumbnail-kUJ6RcQy.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/heading) [Heading](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/heading) [The heading component renders hierarchical titles to communicate the structure and organization of page content.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/heading) [![Paragraph](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/paragraph-thumbnail-DljjYJmu.png)![Paragraph](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/paragraph-thumbnail-DljjYJmu.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/paragraph) [Paragraph](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/paragraph) [The paragraph component displays blocks of text content and can contain inline elements like buttons, links, or emphasized text.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/paragraph) [![Text](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/text-thumbnail-Cn8TJc8F.png)![Text](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/text-thumbnail-Cn8TJc8F.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/text) [Text](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/text) [The text component displays inline text with specific visual styles or tones.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/text) [![Time](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/time-thumbnail-BInsRCaK.png)![Time](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/time-thumbnail-BInsRCaK.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/time) [Time](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/time) [Represents a specific point or duration in time.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/time) [![Tooltip](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/tooltip-thumbnail-kSuIvUCJ.png)![Tooltip](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/tooltip-thumbnail-kSuIvUCJ.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/tooltip) [Tooltip](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/tooltip) [The tooltip component displays helpful information in a small overlay when users hover over or focus on an element.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/typography-and-content/tooltip) ## Utilities [Clipboard​Item](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/utilities/clipboarditem) [Enables copying text to the user’s clipboard.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/polaris-web-components/utilities/clipboarditem)