# ## Banner Use banners to communicate important messages to customers in a prominent way. [View Banner](/docs/api/checkout-ui-extensions/2024-01/components/banner) ## BlockLayout BlockLayout is used to lay out content over multiple rows. By default, all rows fill the available block space, sharing it equally. [View BlockLayout](/docs/api/checkout-ui-extensions/2024-01/components/blocklayout) ## BlockSpacer BlockSpacer is used to create empty block space, typically when variable spacing is needed between multiple elements. Note that you should favor BlockStack when spacing between all elements is the same. [View BlockSpacer](/docs/api/checkout-ui-extensions/2024-01/components/blockspacer) ## BlockStack BlockStack is used to vertically stack elements. [View BlockStack](/docs/api/checkout-ui-extensions/2024-01/components/blockstack) ## Button Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”. [View Button](/docs/api/checkout-ui-extensions/2024-01/components/button) ## Checkbox Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions. [View Checkbox](/docs/api/checkout-ui-extensions/2024-01/components/checkbox) ## Choice Options inside a `ChoiceList`. The wrapping `ChoiceList` component will dictate if the choice renders as radio buttons or checkboxes. [View Choice](/docs/api/checkout-ui-extensions/2024-01/components/choice) ## ChoiceList Use choice lists to present a list of choices where buyers can make a single selection or multiple selections. [View ChoiceList](/docs/api/checkout-ui-extensions/2024-01/components/choicelist) ## ConsentCheckbox Use buyer consent checkboxes for collecting the buyer's approval for a given policy. [View ConsentCheckbox](/docs/api/checkout-ui-extensions/2024-01/components/consentcheckbox) ## 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. [View ConsentPhoneField](/docs/api/checkout-ui-extensions/2024-01/components/consentphonefield) ## DateField Use a date field to get a date input from a customer. [View DateField](/docs/api/checkout-ui-extensions/2024-01/components/datefield) ## DatePicker The DatePicker component is a calendar picker UI that allows users to select a single date or a date range [View DatePicker](/docs/api/checkout-ui-extensions/2024-01/components/datepicker) ## Disclosure Disclosure is an optionally controlled component used to put long sections of information under content blocks that users can expand or collapse by pressing an activator. The activator can be specified as children using an action component (`Button`, `Link` or `Pressable`) or `Checkbox` component. The content blocks can be specified as children inside a structure component (`View`, `InlineLayout`, `BlockStack`, `Grid`, etc.). The library takes care of applying the WAI-ARIA Accordion pattern automatically for the activator and the toggled content. [View Disclosure](/docs/api/checkout-ui-extensions/2024-01/components/disclosure) ## Divider A divider separates content and represents a thematic break between elements. [View Divider](/docs/api/checkout-ui-extensions/2024-01/components/divider) ## Form The form component should be used to wrap one or more form controls. This component provides an "implicit submit" behavior, where customers can submit the form from any input by pressing "Enter" on their keyboards. This behavior is widely expected, and should be respected as often as possible. Unlike an HTML `form` element, this component does not support configuring the descendant fields to be submitted via HTTP automatically. Instead, you must provide an `onSubmit` callback that will perform the necessary HTTP requests in JavaScript. [View Form](/docs/api/checkout-ui-extensions/2024-01/components/form) ## Grid Grid is used to lay out content in a matrix of rows and columns. [View Grid](/docs/api/checkout-ui-extensions/2024-01/components/grid) ## GridItem GridItem can be used as children of Grid. It offers a way to span the element across a number of columns and rows. [View GridItem](/docs/api/checkout-ui-extensions/2024-01/components/griditem) ## Heading Headings control the visual style of headings. Use headings to introduce major sections, like Contact information, Shipping address, or Shipping method. Unlike HTML headings, you don’t explicitly specify the position of the heading in the document outline. Nest headings within the heading group component to control the document outline structure used by assistive technologies. [View Heading](/docs/api/checkout-ui-extensions/2024-01/components/heading) ## HeadingGroup Heading group controls the heading level of headings nested within it, like H1, H2, H3. Use a heading group whenever you use a heading to ensure the experience is the same for screen reader users. When using a heading, any children related to that heading should be nested within the same heading group. [View HeadingGroup](/docs/api/checkout-ui-extensions/2024-01/components/headinggroup) ## Icon Icons are pictograms or graphic symbols. They can act as wayfinding tools or as a means of communicating functionality. [View Icon](/docs/api/checkout-ui-extensions/2024-01/components/icon) ## Image Image is used for large format, responsive images. [View Image](/docs/api/checkout-ui-extensions/2024-01/components/image) ## InlineLayout InlineLayout is used to lay out content over multiple columns. By default, all columns are of equal size and fill the available inline space. Content does not wrap on new rows when not enough columns have been explicitly set, instead they are added as new column and fill the remaining inline space. [View InlineLayout](/docs/api/checkout-ui-extensions/2024-01/components/inlinelayout) ## InlineSpacer InlineSpacer is used to create empty inline space, typically when variable spacing is needed between multiple elements. Note that you should favor InlineStack when spacing between all elements is the same. [View InlineSpacer](/docs/api/checkout-ui-extensions/2024-01/components/inlinespacer) ## InlineStack InlineStack is used to lay out a horizontal row of elements. Elements always wrap. [View InlineStack](/docs/api/checkout-ui-extensions/2024-01/components/inlinestack) ## Link Link makes text interactive so customers can perform an action, such as navigating to another location. [View Link](/docs/api/checkout-ui-extensions/2024-01/components/link) ## List Lists display a set of related content. Each list item usually begins with a bullet or a number. [View List](/docs/api/checkout-ui-extensions/2024-01/components/list) ## ListItem List items are used as children of the `List` component. They usually begins with a bullet or a number. [View ListItem](/docs/api/checkout-ui-extensions/2024-01/components/listitem) ## Map Use the Map component to provide visual representation of geographic data such as verifying address, package or pickup locations. Please note that the merchant or partner has to provide an API key and a set of allowed domains where the map would render. The 3 necessary domains needed are: - `https://*.[MERCHANT-DOMAIN].com` - `https://shop.app` - `https://shopify.com` Where `*` is a wildcard. Learn more about [match patterns](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns). Please refer to the [Google Maps Platform documentation](https://developers.google.com/maps/documentation/javascript/get-api-key) for more details on how to get an API key. [View Map](/docs/api/checkout-ui-extensions/2024-01/components/map) ## MapMarker MapMarker represents a specific location or point of interest on a map. [View MapMarker](/docs/api/checkout-ui-extensions/2024-01/components/mapmarker) ## MapPopover MapPopover provides additional information or context about a specific location or point of interest on a map. [View MapPopover](/docs/api/checkout-ui-extensions/2024-01/components/mappopover) ## Modal Modals are a special type of overlay that shift focus towards a specific action/set of information before the main flow can proceed. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library takes care of applying the WAI-ARIA Dialog pattern automatically for the activator and the modal content. [View Modal](/docs/api/checkout-ui-extensions/2024-01/components/modal) ## PaymentIcon Payment icons can be used for displaying payment-related information or features such as a user’s saved or available payment methods. [View PaymentIcon](/docs/api/checkout-ui-extensions/2024-01/components/paymenticon) ## PhoneField A PhoneField is an input field that merchants can type into optimized for phone numbers with a country code base auto-formatting. The country code is required for the initial render of the field but it can be overriden later by the user either by selecting a country in the country selection dropdown or by manually editing the country phone code directly in the text field. [View PhoneField](/docs/api/checkout-ui-extensions/2024-01/components/phonefield) ## Popover Popovers are similar to tooltips. They are small overlays that open on demand after a user interaction. The difference is that the popover can contain more content, without cluttering the page. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library takes care of applying the WAI-ARIA Popover Widget pattern automatically for the activator and the popover content. [View Popover](/docs/api/checkout-ui-extensions/2024-01/components/popover) ## Pressable Pressable is a generic interactive component. It shares the same styling properties as View but also adds pressable behavior, meaning that you can execute some logic in response to user interaction. Use this component for creating interactive elements without the default styling that comes with `Button` and `Link`. [View Pressable](/docs/api/checkout-ui-extensions/2024-01/components/pressable) ## ProductThumbnail Product thumbnail is a representation of a product image. It provides a visual preview of the item, so buyers can quickly identify products. [View ProductThumbnail](/docs/api/checkout-ui-extensions/2024-01/components/productthumbnail) ## ScrollView ScrollView is a container for long form content, such as order summary line items, that allows for scrolling so customers can expose more content as they view. [View ScrollView](/docs/api/checkout-ui-extensions/2024-01/components/scrollview) ## Select Selects let buyers choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface. [View Select](/docs/api/checkout-ui-extensions/2024-01/components/select) ## SkeletonImage SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page. [View SkeletonImage](/docs/api/checkout-ui-extensions/2024-01/components/skeletonimage) ## SkeletonText SkeletonText is used to provide a low fidelity representation of text content before it appears on the page. Optionally you can use any text content inside `SkeletonText` to be used as a base for the rendered skeleton [View SkeletonText](/docs/api/checkout-ui-extensions/2024-01/components/skeletontext) ## SkeletonTextBlock SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page. Optionally you can use any text content inside `SkeletonTextBlock` to be used as a base for the rendered skeleton [View SkeletonTextBlock](/docs/api/checkout-ui-extensions/2024-01/components/skeletontextblock) ## Spinner Spinner is used to notify buyers that their action is being processed. The Spinner is usually used when sending or receiving data from a server. [View Spinner](/docs/api/checkout-ui-extensions/2024-01/components/spinner) ## Stepper Use a stepper to increase or decrease a value, like changing the quantity from 1 to 2. [View Stepper](/docs/api/checkout-ui-extensions/2024-01/components/stepper) ## Tag A Tag is used to help label, organize or categorize objects. It is commonly used in Checkout to display the discounts applied to a cart. [View Tag](/docs/api/checkout-ui-extensions/2024-01/components/tag) ## Text Text is used to visually style and provide semantic value for a small piece of text content. [View Text](/docs/api/checkout-ui-extensions/2024-01/components/text) ## TextBlock Text block is used to render a block of text that occupies the full width available, like a paragraph. [View TextBlock](/docs/api/checkout-ui-extensions/2024-01/components/textblock) ## TextField Use a text field to get text input from a customer. [View TextField](/docs/api/checkout-ui-extensions/2024-01/components/textfield) ## ToggleButton Options inside a [ToggleButtonGroup](/docs/api/checkout-ui-extensions/components/forms/togglebuttongroup). [View ToggleButton](/docs/api/checkout-ui-extensions/2024-01/components/togglebutton) ## ToggleButtonGroup `ToggleButtonGroup` allows you to make a single choice out of the number of options provided. This is similar to the [ChoiceList](/docs/api/checkout-ui-extensions/components/forms/choicelist) component, but without controls such as checkbox or radio button. You can utilize our layout components to arrange `ToggleButtonGroup`. [View ToggleButtonGroup](/docs/api/checkout-ui-extensions/2024-01/components/togglebuttongroup) ## Tooltip Tooltips are floating labels that briefly explain the function of a user interface element. They must be specified inside the `overlay` prop of an activator component. Currently, activator components are `Button`, `Link`, and `Pressable`. The library takes care of applying the WAI-ARIA Tooltip Widget pattern automatically for the activator and the tooltip content. Expect screen readers to read the tooltip content when the user focuses the activator. [View Tooltip](/docs/api/checkout-ui-extensions/2024-01/components/tooltip) ## View View is a generic container component. Its contents will always be their “natural” size, so this component can be useful in layout components (like `Grid`, `BlockStack`, `InlineStack`) that would otherwise stretch their children to fit. [View View](/docs/api/checkout-ui-extensions/2024-01/components/view) ## StyleHelper This is a helper for authoring conditional values for property styles. Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way. [View StyleHelper](/docs/api/checkout-ui-extensions/2024-01/components/stylehelper)