---
title: "React Select Mobile & Desktop usage Example | Mobiscroll"
component: "Select"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/select/mobile-desktop-usage"
---

# Mobile & Desktop usage - React Select demo

React Select for desktop and mobile. Use a dropdown layout for desktop and native look on mobile. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/select/mobile-desktop-usage)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/pickers/select/mobile-desktop-usage)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/pickers/select/mobile-desktop-usage)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/select/mobile-desktop-usage.md), [jQuery](https://demo.mobiscroll.com/jquery/select/mobile-desktop-usage.md), [Angular](https://demo.mobiscroll.com/angular/select/mobile-desktop-usage.md), [Vue](https://demo.mobiscroll.com/vue/select/mobile-desktop-usage.md)

## Description

Use the select/combobox for both mobile and desktop or set it up responsively.

The main difference between the two rendering modes is how the picker is laid out. Set the `touchUi` option to `false` and the component shows up suitable for larger screens and pointer interaction while setting it to `true` renders it suitable for touch screens.

Use it on an existing form field, custom input, native select or use it on Mobiscroll form fields. You can also embed it directly into your page. When linked to an input, the component will be shown on focus or when someone clicks on the field. Alternatively, you can leave the input editable and show the component only on a button click.

**Handle different screen sizes by setting it up responsively** [Check out the responsive demo →](https://demo.mobiscroll.com/react/select/responsive)

## What this demo shows

- Shows four single-value select examples in touch and desktop layouts.
- **Select inputs** The first example opens the picker when the user focuses or clicks a standard input. The second opens it only from the `Show picker` button next to the input. The third uses a Mobiscroll input as the trigger.
- **Input behavior** In the three input-based examples, the picker opens below the input and closes when the user clicks outside it.
- **Inline select** The fourth example embeds the picker directly in the page without an input by using inline display mode.
- **Picker content** The input-based examples show a predefined list of options in a dropdown-style popup. Inline mode displays the options directly on the page.
- **Hover state** Hovering over an option highlights it in the picker.
- **Selection** Selecting an option marks it with a checkmark to indicate the current value.
- **Input value** In the input-based examples, selecting an option updates the associated input with that value.

## Best for

- **Responsive forms** Use the touch or desktop layout to match the input method and available screen space.
- **Profile and account forms** Let users choose a single predefined value, such as a country, language, or notification preference.
- **Filters and settings** Provide a compact list for selecting one status, category, display mode, or configuration value.
- **Editable text fields** Keep an input editable while opening the predefined options from a separate button.
- **Always-visible choices** Use inline mode when the option list should remain visible without opening a popup.

## Tutorial

```jsx
const myData = [
    { text: 'Atlanta', value: 'atl' },
    { text: 'Berlin', value: 'ber'},
    { text: 'Chicago', value: 'chi'},
    { text: 'London', value: 'lon'}
];
<Select
    data={myData}
    touchUi={false}
    inputComponent="input"
/>
```

```jsx
const myData = [
    { text: 'Atlanta', value: 'atl' },
    { text: 'Berlin', value: 'ber'},
    { text: 'Chicago', value: 'chi'},
    { text: 'London', value: 'lon'}
];
const show = () => { 
    setOpenPicker(true);
};
const onClose = () => {
    setOpenPicker(false);
};
<Select
    data={myData}
    showOnClick={false}
    showOnFocus={false}
    isOpen={openPicker}
    onClose={onClose}
    touchUi={false}
    inputComponent="input"
 />
<Button onClick={show}>Show picker</Button>
```

```jsx
const myData = [
    { text: 'Atlanta', value: 'atl' },
    { text: 'Berlin', value: 'ber'},
    { text: 'Chicago', value: 'chi'},
    { text: 'London', value: 'lon'}
];
<Select
    data={myData}
    touchUi={false}
 />
```

```jsx
const myData = [
    { text: 'Atlanta', value: 'atl' },
    { text: 'Berlin', value: 'ber'},
    { text: 'Chicago', value: 'chi'},
    { text: 'London', value: 'lon'}
];
<Select
    data={myData}
    display="inline"
    touchUi={false}
 />
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/select/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/select/api#opt-themeVariant) - option
- [`inputStyle`](https://mobiscroll.com/docs/react/select/api#opt-inputStyle) - option
- [`data`](https://mobiscroll.com/docs/react/select/api#opt-data) - option
- [`inputComponent`](https://mobiscroll.com/docs/react/select/api#opt-inputComponent) - option
- [`inputProps`](https://mobiscroll.com/docs/react/select/api#opt-inputProps) - option
- [`showOnClick`](https://mobiscroll.com/docs/react/select/api#opt-showOnClick) - option
- [`showOnFocus`](https://mobiscroll.com/docs/react/select/api#opt-showOnFocus) - option
- [`isOpen`](https://mobiscroll.com/docs/react/select/api#opt-isOpen) - option
- [`onChange`](https://mobiscroll.com/docs/react/select/api#event-onChange) - event
- [`onClose`](https://mobiscroll.com/docs/react/select/api#event-onClose) - event
- [`touchUi`](https://mobiscroll.com/docs/react/select/api#opt-touchUi) - option
- [`display`](https://mobiscroll.com/docs/react/select/api#opt-display) - option

## Code

### JSX

```jsx
import { Button, Select, setOptions } from '@mobiscroll/react';
import { useCallback, useMemo, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  const [openPicker, setOpenPicker] = useState(false);
  const [selected, setSelected] = useState('atl');

  const myData = useMemo(
    () => [
      {
        text: 'Atlanta',
        value: 'atl',
      },
      {
        text: 'Berlin',
        value: 'ber',
      },
      {
        text: 'Chicago',
        value: 'chi',
      },
      {
        text: 'London',
        value: 'lon',
      },
    ],
    [],
  );

  const handleClick = useCallback(() => {
    setOpenPicker(true);
  }, []);

  const handleChange = useCallback((ev) => {
    setSelected(ev.value);
  }, []);

  const handleClose = useCallback(() => {
    setOpenPicker(false);
  }, []);

  const inputProps = useMemo(
    () => ({
      className: 'md-mobile-picker-input',
      placeholder: 'Please Select...',
    }),
    [],
  );

  const boxInputProps = useMemo(
    () => ({
      className: 'md-mobile-picker-box-label',
      inputStyle: 'outline',
      placeholder: 'Please Select...',
    }),
    [],
  );

  return (
    <>
      <div className="mbsc-grid">
        <div className="mbsc-form-group">
          <div className="mbsc-row">
            <div className="mbsc-col-12">
              <div className="mbsc-txt-muted md-mobile-picker-header">Use the picker with any inputs & show on focus/click</div>
              <Select data={myData} inputComponent="input" inputProps={inputProps} />
            </div>
          </div>
        </div>
        <div className="mbsc-form-group">
          <div className="mbsc-row">
            <div className="mbsc-col-12 mbsc-txt-muted md-mobile-picker-header">
              Disable <code>onClick/onFocus</code> and only show on button
            </div>
            <div className="mbsc-col-8">
              <Select
                data={myData}
                inputComponent="input"
                inputProps={inputProps}
                showOnClick={false}
                showOnFocus={false}
                isOpen={openPicker}
                value={selected}
                onChange={handleChange}
                onClose={handleClose}
              />
            </div>
            <div className="mbsc-col-4">
              <Button variant="outline" color="primary" className="md-mobile-picker-button" onClick={handleClick}>
                Show picker
              </Button>
            </div>
          </div>
        </div>
        <div className="mbsc-form-group">
          <div className="mbsc-row">
            <div className="mbsc-col-12">
              <div className="mbsc-txt-muted md-mobile-picker-header">Use the picker with a Mobiscroll input</div>
              <Select data={myData} inputProps={boxInputProps} touchUi={true} />
            </div>
          </div>
        </div>
        <div className="mbsc-txt-muted md-mobile-picker-header">Use the picker inline in any page</div>
      </div>
      <div className="md-mobile-picker-inline">
        <Select display="inline" data={myData} />
      </div>
    </>
  );
}

export default App;
```

### TSX

```tsx
import { Button, MbscSelectChangeEvent, Select, setOptions } from '@mobiscroll/react';
import { FC, useCallback, useMemo, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const myData = [
  {
    text: 'Atlanta',
    value: 'atl',
  },
  {
    text: 'Berlin',
    value: 'ber',
  },
  {
    text: 'Chicago',
    value: 'chi',
  },
  {
    text: 'London',
    value: 'lon',
  },
];

const App: FC = () => {
  const [openPicker, setOpenPicker] = useState<boolean>(false);
  const [selected, setSelected] = useState<string>('1');

  const handleClick = useCallback(() => {
    setOpenPicker(true);
  }, []);

  const handleChange = useCallback((ev: MbscSelectChangeEvent) => {
    setSelected(ev.value);
  }, []);

  const handleClose = useCallback(() => {
    setOpenPicker(false);
  }, []);

  const inputProps = useMemo(
    () => ({
      className: 'md-mobile-picker-input',
      placeholder: 'Please Select...',
    }),
    [],
  );

  const boxInputProps = useMemo(
    () => ({
      className: 'md-mobile-picker-box-label',
      inputStyle: 'outline',
      placeholder: 'Please Select...',
    }),
    [],
  );

  return (
    <>
      <div className="mbsc-grid">
        <div className="mbsc-form-group">
          <div className="mbsc-row">
            <div className="mbsc-col-12">
              <div className="mbsc-txt-muted md-mobile-picker-header">Use the picker with any inputs & show on focus/click</div>
              <Select data={myData} inputComponent="input" inputProps={inputProps} />
            </div>
          </div>
        </div>
        <div className="mbsc-form-group">
          <div className="mbsc-row">
            <div className="mbsc-col-12 mbsc-txt-muted md-mobile-picker-header">
              Disable <code>onClick/onFocus</code> and only show on button
            </div>
            <div className="mbsc-col-8">
              <Select
                data={myData}
                inputComponent="input"
                inputProps={inputProps}
                showOnClick={false}
                showOnFocus={false}
                isOpen={openPicker}
                value={selected}
                onChange={handleChange}
                onClose={handleClose}
              />
            </div>
            <div className="mbsc-col-4">
              <Button variant="outline" color="primary" className="md-mobile-picker-button" onClick={handleClick}>
                Show picker
              </Button>
            </div>
          </div>
        </div>
        <div className="mbsc-form-group">
          <div className="mbsc-row">
            <div className="mbsc-col-12">
              <div className="mbsc-txt-muted md-mobile-picker-header">Use the picker with a Mobiscroll input</div>
              <Select data={myData} inputProps={boxInputProps} touchUi={true} />
            </div>
          </div>
        </div>
        <div className="mbsc-txt-muted md-mobile-picker-header">Use the picker inline in any page</div>
      </div>
      <div className="md-mobile-picker-inline">
        <Select display="inline" data={myData} />
      </div>
    </>
  );
};
export default App;
```

### CSS

```css
.md-mobile-picker-header {
  font-size: 14px;
}

.md-mobile-picker-input {
  color: initial;
  width: 100%;
  padding: 10px;
  margin: 6px 0 12px 0;
  border: 1px solid #ccc;
  border-radius: 0;
  font-family: arial, verdana, sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.md-mobile-picker-button.mbsc-button {
  font-size: 13px;
  padding: 0 15px;
  line-height: 36px;
  float: right;
  margin: 6px 0;
  width: 100%;
}

.mbsc-col-no-padding {
  padding-left: 0;
}

.md-mobile-picker-box-label.mbsc-textfield-wrapper-box,
.md-mobile-picker-box-label .mbsc-textfield-wrapper-box,
.md-mobile-picker-inline {
  margin: 6px 0 12px 0;
}
```

## Implementation notes

- `touchUi` (boolean) is the option that switches all four examples between touch-optimized mobile layout (`true`) and pointer-optimized desktop layout (`false`); it does not change which display mode is used, only how the picker is rendered/positioned within it.
- `data` is an array of `{ text, value }` objects (e.g. `{ text: 'Atlanta', value: 'atl' }`); JS/jQuery and Angular instead source the same options from a native `<select>`'s `<option value="...">Text</option>` children (Angular can alternatively use `<mbsc-select-option value="...">`).
- The first example binds the picker to a plain input: React/Vue pass `inputComponent="input"` on `<Select>`/`<MbscSelect>` so the component renders its own bound `<input>`; Angular passes `[inputElement]="myinput"` pointing at a template-referenced `<input #myinput>`; JS/jQuery pass `inputElement: document.getElementById('my-input')`. Focusing or clicking that input opens the picker by default.
- The second example disables the default open triggers with `showOnClick={false}` / `:showOnClick="false"` / `[showOnClick]="false"` / `showOnClick: false` and `showOnFocus` (same pattern) so the picker only opens from a separate `Show picker` button.
- Opening on the button click is declarative in React/Vue: a boolean state (`openPicker`/`isPickerOpen`) drives the `isOpen`/`:isOpen` prop, the button's click handler sets it `true`, and the `onClose`/`@close` handler resets it to `false`. It is imperative in Angular and JS/jQuery: Angular keeps a `@ViewChild('picker', { static: false })` reference to the select and calls `pickerInst.open()`; JS/jQuery call `.mobiscroll('getInst')` (jQuery) or capture the return value of `mobiscroll.select(...)` (JS) once to get the instance, then call `.open()` from the button's click handler.
- The third example binds the picker to a Mobiscroll-styled input instead of a plain one: the trigger input carries the `mbsc-input` attribute/directive (JS/jQuery/Angular) so it renders with Mobiscroll's label/box styling; React/Vue use the same `data`/`touchUi` props without `inputComponent`, since `<Select>`/`<MbscSelect>` renders a Mobiscroll input by default.
- The fourth example sets `display="inline"` (React/Vue prop, Angular attribute) or `display: 'inline'` (JS/jQuery option) to embed the option list directly on the page with no input and no modal.
- `.setVal(value, fireChange)` (JS/jQuery instance method) programmatically preselects a value on the picker instance after creation, e.g. `buttonSelect.setVal('atl', true)` on the button-triggered example; the second argument controls whether the picker's `onChange` handling fires for that programmatic update.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-react.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config react
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config react --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Next: [Responsive behavior](https://demo.mobiscroll.com/react/select/responsive.md) - Responsive setup of the React select. Change the rendering and positioning dynamically, based on screen size.