---
title: Selectable
description: >-
  The `Selectable` component allows you to wrap any non-interactive UI component
  to make it selectable. Use `Selectable` to add tap interactions to components
  that don't normally respond to user input while maintaining their original
  styling.


  Wrap non-interactive components like `Text`, `Image`, `Icon`, or custom
  layouts that need tap functionality. Don't wrap components that already have
  built-in interactions like `Button` or `TextField`. `Selectable` components
  maintain consistent selection state across re-renders and navigation, ensuring
  merchants don't lose their choices when moving between screens or interacting
  with other interface elements.
api_version: 2024-07
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/actions/selectable
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/actions/selectable.md
---

# Selectable

The `Selectable` component allows you to wrap any non-interactive UI component to make it selectable. Use `Selectable` to add tap interactions to components that don't normally respond to user input while maintaining their original styling.

Wrap non-interactive components like `Text`, `Image`, `Icon`, or custom layouts that need tap functionality. Don't wrap components that already have built-in interactions like `Button` or `TextField`. `Selectable` components maintain consistent selection state across re-renders and navigation, ensuring merchants don't lose their choices when moving between screens or interacting with other interface elements.

## Properties

Configure the following properties on the `Selectable` component.

* onPress

  () => void

  required

  The callback function that's executed when the user taps or presses the selectable component. This is the primary way to handle user interactions with the wrapped content. The function receives no parameters and should contain the logic for what happens when the selection occurs, such as navigation, state updates, or triggering other actions.

* disabled

  boolean

  Controls whether the selectable component responds to user interactions. When set to `true`, the component won't react to taps or presses, the `onPress` callback won't be triggered, and the wrapped content appears non-interactive. Use this to temporarily disable selection during loading states, form validation, or when certain conditions aren't met. When `false` or undefined, the component responds normally to user interactions.

### Examples

* #### Make static components tappable

  ##### Description

  Add tap interaction to non-interactive components while preserving their styling. This example shows how to wrap components like Text, Image, or custom layouts with Selectable to make them respond to user taps without changing their visual appearance.

  ##### React

  ```tsx
  import React, { useState } from 'react';

  import { Screen, reactExtension, Text, ScrollView, Selectable } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridModal = () => {
    const [count, setCount] = useState(0);

    return (
      <Screen name='selectable' title='Selectable'>
        <ScrollView>
          <Selectable onPress={() => {setCount(count + 1)}}>
            <Text variant="body">{count}</Text>
          </Selectable>
        </ScrollView>
      </Screen>
    );
  }

  export default reactExtension('pos.home.modal.render', () => {
    return <SmartGridModal />
  })
  ```

  ##### TS

  ```ts
  import {
    extension,
    Screen,
    ScrollView,
    Selectable,
    Stepper,
    Text,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension(
    'pos.home.modal.render',
    (root) => {
      let value = 0;

      const mainScreen = root.createComponent(
        Screen,
        {name: 'selectable', title: 'Selectable'},
      );
      const scrollView =
        root.createComponent(ScrollView);
      const text = root.createComponent(
        Text,
        null,
        value.toString(),
      );
      const selectable = root.createComponent(
        Selectable,
        {
          onPress: () => {
            value += 1;
            text.replaceChildren(value.toString());
          },
        },
      );

      selectable.append(text);
      scrollView.append(selectable);
      mainScreen.append(scrollView);
      root.append(mainScreen);
    },
  );
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-07/selectable-default.png)

## Best practices

* **Use meaningful press handlers:** Implement `onPress` callbacks that perform clear, expected actions. Users should understand what will happen when they tap the selectable content based on its visual presentation and context.
* **Disable when appropriate:** Use the `disabled` property to prevent interactions when the selectable content shouldn't respond to user input, such as during loading states or when certain conditions aren't met.
* **Maintain consistent interaction patterns:** Keep selectable interactions consistent with other interactive elements in your interface. Users should have predictable experiences when tapping different types of content.

## Limitations

* Selectable components don't provide built-in visual feedback for interactions. You must implement selection indicators yourself.
* The component is designed for wrapping non-interactive content. Wrapping already-interactive components may cause unexpected behavior.
* Complex nested interactions within selectable content aren't supported and may interfere with the tap functionality.
* Selectable components don't support keyboard navigation or focus management beyond basic tap interactions.