# Selectable
The selectable component allows you to wrap any non-interactive UI component to make it selectable.
### Selectable

```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
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);
  },
);

```


## Selectable

### SelectableProps

### disabled
Whether the selectable reacts to presses.
### onPress
The callback on press.