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

# UI components

## Actions

[![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/ui-components/actions/actionitem)

[Action​Item](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/actions/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/ui-components/actions/actionitem)

[![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/ui-components/actions/button)

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

[The `Button` component triggers actions or events, such as opening dialogs or navigating to other pages.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/actions/button)

[![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/ui-components/actions/selectable)

[Selectable](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/actions/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/ui-components/actions/selectable)

[![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/ui-components/actions/tile)

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

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

## Feedback and status indicators

[![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/ui-components/feedback-and-status-indicators/badge)

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

[The `Badge` component uses color and text to communicate status information for orders, products, customers, and other business data.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/feedback-and-status-indicators/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/ui-components/feedback-and-status-indicators/banner)

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

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

[![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/ui-components/feedback-and-status-indicators/dialog)

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

[The `Dialog` component displays a modal that requires user attention and interaction.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/feedback-and-status-indicators/dialog)

## Forms

[![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/ui-components/forms/datefield)

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

[The `DateField` component captures date input with a consistent interface for date selection and proper validation.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/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/ui-components/forms/datepicker)

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

[The `DatePicker` component allows merchants to select a specific date using a calendar-like picker interface.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/datepicker)

[![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/ui-components/forms/emailfield)

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

[The `EmailField` component captures email address input from customers with built-in validation.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/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/ui-components/forms/formattedtextfield)

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

[The `FormattedTextField` component captures text input with specific formatting, validation, and keyboard optimization.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/formattedtextfield)

[![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/ui-components/forms/numberfield)

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

[The `NumberField` component captures numeric input with built-in validation.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/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/ui-components/forms/pinpad)

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

[The `PinPad` component provides a secure numeric keypad interface for PIN entry and validation.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/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/ui-components/forms/radiobuttonlist)

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

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

[![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/ui-components/forms/stepper)

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

[The `Stepper` component provides increment and decrement controls for numeric values with visual feedback.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/stepper)

[![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/ui-components/forms/textarea)

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

[The `TextArea` component captures longer text content with a multi-line, resizable text input area.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/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/ui-components/forms/textfield)

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

[The `TextField` component captures single-line text input.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/textfield)

[![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/ui-components/forms/timefield)

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

[The `TimeField` component captures time input from merchants with a consistent interface for time selection and proper validation.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/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/ui-components/forms/timepicker)

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

[The `TimePicker` component allows merchants to select a specific time using an interactive picker interface.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/timepicker)

## Layout and structure

[![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/ui-components/layout-and-structure/list)

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

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

[![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/ui-components/layout-and-structure/screen)

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

[The `Screen` component represents a screen in the navigation stack with full control over presentation, actions, and navigation lifecycle.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/layout-and-structure/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/ui-components/layout-and-structure/scrollview)

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

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

[![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/ui-components/layout-and-structure/section)

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

[The `Section` component groups related content into clearly-defined thematic areas.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/layout-and-structure/section)

[![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/ui-components/layout-and-structure/spacing)

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

[The `Spacing` component provides a set of spacing constants to be used in the POS UI extensions components library.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/layout-and-structure/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/ui-components/layout-and-structure/stack)

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

[The `Stack` component organizes elements horizontally or vertically along the block or inline axis.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/layout-and-structure/stack)

[![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/ui-components/layout-and-structure/text)

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

[The `Text` component displays text with specific visual styles and colors.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/layout-and-structure/text)

## Media and visuals

[![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/ui-components/media-and-visuals/icon)

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

[The `Icon` component displays standardized visual symbols from the POS catalog to represent actions, statuses, or categories consistently.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/media-and-visuals/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/ui-components/media-and-visuals/image)

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

[The `Image` component adds visual content within the interface and allows you to customize the presentation of visuals.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/media-and-visuals/image)

## Navigation and content

[![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/ui-components/navigation-and-content/camerascanner)

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

[The `CameraScanner` component provides camera-based scanning functionality with optional banner messaging.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/navigation-and-content/camerascanner)

[![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/ui-components/navigation-and-content/navigator)

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

[The `Navigator` component manages navigation between multiple `Screen` components within a POS UI extension.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/navigation-and-content/navigator)

[![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/ui-components/navigation-and-content/searchbar)

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

[The `SearchBar` component provides a specialized input field for search functionality with built-in search button and text change handling.](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/navigation-and-content/searchbar)

[![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/ui-components/navigation-and-content/segmentedcontrol)

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

[The `SegmentedControl` component displays 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-07/ui-components/navigation-and-content/segmentedcontrol)

***