--- api_version: 2024-07 api_name: pos-ui-extensions source_url: html: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components' md: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components.md' --- # Components [![ActionItem](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/action-item-thumbnail.png)![ActionItem](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/action-item-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/actionitem) [Action​Item](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/actionitem) [The `ActionItem` provides a tappable surface on the specified extension target as an entry point to an extension.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/actionitem) [![Badge](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/badge-thumbnail.png)![Badge](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/badge-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/badge) [Badge](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/badge) [Badges are used to inform merchants of the status of an item or action that’s been taken.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/badge) [![Banner](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/banner-thumbnail.png)![Banner](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/banner-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/banner) [Banner](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/banner) [A banner informs merchants about important changes or persistent conditions.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/banner) [![Button](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/button-thumbnail.png)![Button](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/button-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/button) [Button](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/button) [Buttons enable the merchant to initiate actions, like "add", "save", or "next".](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/button) [![CameraScanner](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/camera-scanner-thumbnail.png)![CameraScanner](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/camera-scanner-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/camerascanner) [Camera​Scanner](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/camerascanner) [The camera scanner uses the devices camera to scan and decode barcodes or QR codes.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/camerascanner) [![DateField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/date-field-thumbnail.png)![DateField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/date-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/datefield) [Date​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/datefield) [A component that enables users to open a dialog and select a date through a text input.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/datefield) [![DatePicker](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/date-picker-thumbnail.png)![DatePicker](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/date-picker-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/datepicker) [Date​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/datepicker) [A component used to select a date through a dialog.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/datepicker) [![Dialog](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/dialog-thumbnail.png)![Dialog](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/dialog-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/dialog) [Dialog](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/dialog) [A dialog is a high-priority, intentionally disruptive message that requires action from the merchant before they can continue using POS.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/dialog) [![EmailField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/email-field-thumbnail.png)![EmailField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/email-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/emailfield) [Email​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/emailfield) [Use an email field to conveniently and accurately capture merchant email addresses.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/emailfield) [![FormattedTextField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/formatted-text-field-thumbnail.png)![FormattedTextField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/formatted-text-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/formattedtextfield) [Formatted​Text​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/formattedtextfield) [Use a formatted text field when you require additional functionality such as the text field input type or a custom validator.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/formattedtextfield) [![Icon](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/icon-thumbnail.png)![Icon](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/icon-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/icon) [Icon](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/icon) [A component that renders an icon from the POS asset catalog.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/icon) [![Image](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/image-thumbnail.png)![Image](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/image-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/image) [Image](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/image) [The image component displays an image to a merchant in Shopify POS.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/image) [![List](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/list-thumbnail.png)![List](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/list-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/list) [List](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/list) [The list is a scrollable component in which the list rows are rendered.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/list) [![Navigator](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/navigator-thumbnail.png)![Navigator](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/navigator-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/navigator) [Navigator](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/navigator) [A component used to navigate between different screens.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/navigator) [![NumberField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/number-field-thumbnail.png)![NumberField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/number-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/numberfield) [Number​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/numberfield) [Use a number field to conveniently and accurately capture numerical values.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/numberfield) [![PinPad](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/pin-pad-thumbnail.png)![PinPad](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/pin-pad-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/pinpad) [Pin​Pad](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/pinpad) [A component used to authenticate or identify individuals through a standarized number pad.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/pinpad) [![RadioButtonList](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/radio-button-list-thumbnail.png)![RadioButtonList](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/radio-button-list-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/radiobuttonlist) [Radio​Button​List](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/radiobuttonlist) [A radio button list lets merchants select from a given set of options.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/radiobuttonlist) [![Screen](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/screen-thumbnail.png)![Screen](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/screen-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/screen) [Screen](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/screen) [A component used in the root of a modal extension to define a screen.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/screen) [![ScrollView](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/scroll-view-thumbnail.png)![ScrollView](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/scroll-view-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/scrollview) [Scroll​View](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/scrollview) [The ScrollView component allows content that doesn’t fully fit on screen to scroll.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/scrollview) [![SearchBar](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/search-bar-thumbnail.png)![SearchBar](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/search-bar-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/searchbar) [Search​Bar](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/searchbar) [The search bar lets merchants enter search queries for objects throughout the app.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/searchbar) [![Section](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/section-header-thumbnail.png)![Section](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/section-header-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/section) [Section](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/section) [A component used to group other components together in a card-like UI.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/section) [![SegmentedControl](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/segmented-control-thumbnail.png)![SegmentedControl](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/segmented-control-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/segmentedcontrol) [Segmented​Control](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/segmentedcontrol) [The segmented control lets the merchant easily switch between different lists or views on the same page.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/segmentedcontrol) [![Selectable](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/selectable-thumbnail.png)![Selectable](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/selectable-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/selectable) [Selectable](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/selectable) [The selectable component allows you to wrap any non-interactive UI component to make it selectable.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/selectable) [![Spacing](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/spacing-thumbnail.png)![Spacing](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/spacing-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/spacing) [Spacing](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/spacing) [Set of spacing constants to be used in the UI Extensions components library.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/spacing) [![Stack](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/stack-thumbnail.png)![Stack](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/stack-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/stack) [Stack](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/stack) [A container for other components that allows them to be stacked horizontally or vertically.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/stack) [![Stepper](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/stepper-thumbnail.png)![Stepper](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/stepper-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/stepper) [Stepper](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/stepper) [A component used for increasing or decreasing quantities.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/stepper) [![Text](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/text-thumbnail.png)![Text](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/text-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/text) [Text](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/text) [Text can be rendered in different sizes and colors in order to structure content.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/text) [![TextArea](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/text-area-thumbnail.png)![TextArea](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/text-area-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/textarea) [Text​Area](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/textarea) [Use a text input to allow merchants to input or modify multiline text.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/textarea) [![TextField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/text-field-thumbnail.png)![TextField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/text-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/textfield) [Text​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/textfield) [Use a text field to allow merchants to enter or edit text.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/textfield) [![Tile](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/tile-thumbnail.png)![Tile](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/tile-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/tile) [Tile](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/tile) [Tiles are customizable buttons that allow staff to complete actions quickly.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/tile) [![TimeField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/time-field-thumbnail.png)![TimeField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/time-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/timefield) [Time​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/timefield) [A component that enables users to open a dialog and select a time through a text input.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/timefield) [![TimePicker](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/time-picker-thumbnail.png)![TimePicker](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/time-picker-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/timepicker) [Time​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/timepicker) [A component used to select a time through a dialog.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/components/timepicker)