---
title: UI components
description: UI components for building user interfaces in POS UI extensions.
api_version: 2024-04
api_name: pos-ui-extensions
source_url:
  html: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components'
  md: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components.md'
---

# UI components

UI components are the building blocks that you use to display data and trigger API functions in POS UI extensions. These components follow [Shopify's design system](https://shopify.dev/docs/apps/design) and render optimized interfaces for retail workflows in [the POS app](https://apps.shopify.com/shopify-pos) on iOS and Android devices.

Your [target](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/targets) determines which components you can use because different locations in POS have different interface requirements and constraints.

## Actions

Actions trigger retail operations through quick, touch-based interactions like applying discounts, confirming payments, and initiating workflows.

[![ActionItem](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/action-item-thumbnail.png)![ActionItem](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/action-item-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/actions/actionitem)

[Action​Item](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/actions/actionitem)

[Render an interactive menu item that serves as an entry point to your extension.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/actions/actionitem)

[![Button](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/button-thumbnail.png)![Button](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/button-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/actions/button)

[Button](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/actions/button)

[Execute actions through tappable button elements with customizable titles and styles.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/actions/button)

[![Selectable](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/selectable-thumbnail.png)![Selectable](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/selectable-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/actions/selectable)

[Selectable](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/actions/selectable)

[Make non-interactive components tappable and trigger actions when pressed.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/actions/selectable)

[![Tile](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/tile-thumbnail.png)![Tile](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/tile-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/actions/tile)

[Tile](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/actions/tile)

[Display interactive buttons for the POS smart grid that allow merchants to complete actions quickly.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/actions/tile)

## Feedback and status indicators

Feedback and status indicators keep staff informed about transaction status, errors, and confirmations during retail operations.

[![Badge](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/badge-thumbnail.png)![Badge](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/badge-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/feedback-and-status-indicators/badge)

[Badge](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/feedback-and-status-indicators/badge)

[Use color and text to communicate the state of orders, products, customers, and other business data.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/feedback-and-status-indicators/badge)

[![Banner](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/banner-thumbnail.png)![Banner](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/banner-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/feedback-and-status-indicators/banner)

[Banner](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/feedback-and-status-indicators/banner)

[Highlight important information or required actions prominently within the POS interface.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/feedback-and-status-indicators/banner)

[![Dialog](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/dialog-thumbnail.png)![Dialog](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/dialog-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/feedback-and-status-indicators/dialog)

[Dialog](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/feedback-and-status-indicators/dialog)

[Display confirmation dialogs and alerts that require user response before proceeding.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/feedback-and-status-indicators/dialog)

## Forms

Forms capture data during transactions with built-in validation and formatting optimized for mobile touch interfaces.

[![DateField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/date-field-thumbnail.png)![DateField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/date-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/datefield)

[Date​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/datefield)

[Capture date input with a consistent interface for date selection and proper validation.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/datefield)

[![DatePicker](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/date-picker-thumbnail.png)![DatePicker](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/date-picker-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/datepicker)

[Date​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/datepicker)

[Allow merchants to select a specific date using a calendar-like picker interface.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/datepicker)

[![EmailField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/email-field-thumbnail.png)![EmailField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/email-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/emailfield)

[Email​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/emailfield)

[Capture email address input from customers with built-in validation.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/emailfield)

[![FormattedTextField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/formatted-text-field-thumbnail.png)![FormattedTextField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/formatted-text-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/formattedtextfield)

[Formatted​Text​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/formattedtextfield)

[Capture text input with specific formatting, validation, and keyboard optimization.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/formattedtextfield)

[![NumberField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/number-field-thumbnail.png)![NumberField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/number-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/numberfield)

[Number​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/numberfield)

[Capture numeric input with built-in validation.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/numberfield)

[![PinPad](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/pin-pad-thumbnail.png)![PinPad](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/pin-pad-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/pinpad)

[Pin​Pad](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/pinpad)

[Provide a secure numeric keypad interface for PIN entry and validation.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/pinpad)

[![RadioButtonList](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/radio-button-list-thumbnail.png)![RadioButtonList](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/radio-button-list-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/radiobuttonlist)

[Radio​Button​List](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/radiobuttonlist)

[Present radio button options for single selection from a list of string values.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/radiobuttonlist)

[![Stepper](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/stepper-thumbnail.png)![Stepper](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/stepper-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/stepper)

[Stepper](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/stepper)

[Provide increment and decrement controls for numeric values with visual feedback.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/stepper)

[![TextArea](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/text-area-thumbnail.png)![TextArea](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/text-area-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/textarea)

[Text​Area](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/textarea)

[Capture longer text content with a multi-line, resizable text input area.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/textarea)

[![TextField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/text-field-thumbnail.png)![TextField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/text-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/textfield)

[Text​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/textfield)

[Capture single-line text input.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/textfield)

[![TimeField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/time-field-thumbnail.png)![TimeField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/time-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/timefield)

[Time​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/timefield)

[Capture time input with a consistent interface for time selection and validation.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/timefield)

[![TimePicker](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/time-picker-thumbnail.png)![TimePicker](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/time-picker-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/timepicker)

[Time​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/timepicker)

[Allow merchants to select a specific time using an interactive picker interface.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/forms/timepicker)

## Layout and structure

Layout and structure components create consistent visual hierarchy and spacing, presenting content clearly across different device sizes.

[![List](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/list-thumbnail.png)![List](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/list-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/list)

[List](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/list)

[Display structured data in rows with rich content including labels, subtitles, badges, images, and interactive elements.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/list)

[![Screen](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/screen-thumbnail.png)![Screen](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/screen-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/screen)

[Screen](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/screen)

[Define full-screen views within modals with navigation titles and back button support.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/screen)

[![ScrollView](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/scroll-view-thumbnail.png)![ScrollView](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/scroll-view-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/scrollview)

[Scroll​View](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/scrollview)

[Create a scrollable container for content that exceeds the available display area.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/scrollview)

[![Section](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/section-header-thumbnail.png)![Section](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/section-header-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/section)

[Section](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/section)

[Group related content into clearly-defined thematic areas.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/section)

[![Spacing](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/spacing-thumbnail.png)![Spacing](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/spacing-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/spacing)

[Spacing](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/spacing)

[Apply consistent spacing to maintain visual balance and touch-friendly layouts.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/spacing)

[![Stack](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/stack-thumbnail.png)![Stack](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/stack-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/stack)

[Stack](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/stack)

[Organize elements horizontally or vertically along the block or inline axis.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/stack)

[![Text](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/text-thumbnail.png)![Text](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/text-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/text)

[Text](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/text)

[Display text with specific visual styles or tones.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/layout-and-structure/text)

## Media and visuals

Media and visuals display product images, icons, and branding elements that help staff identify products and communicate information.

[![Icon](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/icon-thumbnail.png)![Icon](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/icon-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/media-and-visuals/icon)

[Icon](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/media-and-visuals/icon)

[Display standardized visual symbols from the POS catalog to represent actions, statuses, or categories consistently.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/media-and-visuals/icon)

[![Image](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/image-thumbnail.png)![Image](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/image-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/media-and-visuals/image)

[Image](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/media-and-visuals/image)

[Add visual content to the POS interface and customize the presentation of visuals.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/media-and-visuals/image)

## Navigation and content

Navigation and content components help staff find products, manage information, and navigate through retail data.

[![CameraScanner](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/camera-scanner-thumbnail.png)![CameraScanner](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/camera-scanner-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/navigation-and-content/camerascanner)

[Camera​Scanner](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/navigation-and-content/camerascanner)

[Provide camera-based scanning functionality with optional banner messaging.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/navigation-and-content/camerascanner)

[![Navigator](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/navigator-thumbnail.png)![Navigator](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/navigator-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/navigation-and-content/navigator)

[Navigator](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/navigation-and-content/navigator)

[Manage navigation between multiple Screen components within a POS UI extension.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/navigation-and-content/navigator)

[![SearchBar](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/search-bar-thumbnail.png)![SearchBar](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/search-bar-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/navigation-and-content/searchbar)

[Search​Bar](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/navigation-and-content/searchbar)

[Provide a text input field optimized for search with automatic search icon and change handling.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/navigation-and-content/searchbar)

[![SegmentedControl](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/segmented-control-thumbnail.png)![SegmentedControl](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/segmented-control-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/navigation-and-content/segmentedcontrol)

[Segmented​Control](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/navigation-and-content/segmentedcontrol)

[Display a horizontal row of segments that allow users to switch between different views or filter content.](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/ui-components/navigation-and-content/segmentedcontrol)

***