---
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-10
api_name: pos-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/pos-ui-extensions/2024-10/ui-components/actions/selectable
md: >-
https://shopify.dev/docs/api/pos-ui-extensions/2024-10/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.
### Support Targets (6)
### Supported targets
* [pos.customer-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/customer-details#customer-details-action-modal-)
* [pos.draft-order-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/draft-order-details#draft-order-details-action-modal-)
* [pos.home.modal.render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/home-screen#home-screen-action-modal-)
* [pos.order-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/order-details#order-details-action-modal-)
* [pos.product-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/product-details#product-details-action-modal-)
* [pos.purchase.post.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/post-purchase#post-purchase-action-modal-)
#### Use cases
* **List items:** Wrap text components to create selectable list items or menu options.
* **Interactive media:** Make image or icon components interactive for gallery selections or navigation.
* **Custom cards:** Create card layouts that respond to taps without button styling.
* **Selection interfaces:** Build custom selection interfaces for product catalogs or option lists.
## Examples
### Make components tappable
Add tap interactions to non-interactive components while preserving their appearance. This example demonstrates wrapping components like Text, Image, or Icon with Selectable to make them respond to user input without changing their original styling or layout.
## Make components tappable
### Examples
* #### Make components tappable
##### Description
Add tap interactions to non-interactive components while preserving their appearance. This example demonstrates wrapping components like Text, Image, or Icon with Selectable to make them respond to user input without changing their original styling or layout.
##### 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 (
{setCount(count + 1)}}>
{count}
);
}
export default reactExtension('pos.home.modal.render', () => {
return
})
```
##### 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);
},
);
```
## 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.
## 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.