---
title: "React Select Responsive behavior Example | Mobiscroll"
component: "Select"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/select/responsive"
---

# Responsive behavior - React Select demo

Responsive setup of the React select. Change the rendering and positioning dynamically, based on screen size. For React and Next.JS.

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

## Description

The select has a liquid layout, which means it nicely adapts to its surroundings. There are times however when you would like to set up the component responsively.

Use the [`responsive` option](https://mobiscroll.com/docs/react/select/api#opt-responsive) to configure the picker and change the options based on the viewport width. There are five predefined breakpoints:

- `xsmall` - min-width: 0px
- `small` - min-width: 576px
- `medium` - min-width: 768px
- `large` - min-width: 992px
- `xlarge` - min-width: 1200px
- use `custom` for setting a custom `breakpoint`

It is a good idea to change the `display` or `controls` option to tailor the UX. This way you can have a **bottom positioned picker on mobile**, a **popover anchored to the input on tablet** and **desktop display on large screens**.

## What this demo shows

- Shows a single-value picker that changes its display mode and interaction pattern across touch and desktop viewport presets.
- **Viewport switcher** A segmented control above the picker switches between the available viewport presets.
- **Small screen layout** At the `375px` preset, the picker opens at the bottom of the screen with a wheel-style scroller. Users can scroll or drag through the options, and the current value appears in a centered gray selection band while the other options use muted text.
- **Small screen actions** The bottom of the picker contains a gray `Cancel` button that discards changes and a blue `Set` button that confirms the selection.
- **Medium screen layout** At the `576px` and `768px` presets, the picker opens in a popover anchored to the input. It uses the same wheel-style scrolling, centered selection band, and `Cancel` and `Set` actions as the small screen layout.
- **Large screen layout** At the `992px` and `1200px` presets, the picker uses a desktop display. Hovering highlights an option, and selecting it adds a checkmark to identify the current value.
- **Opening the picker** Focusing or clicking the input opens the picker.
- **Backdrop and dismissal** The first three viewport presets use a darkened backdrop. The two largest presets do not. Clicking outside the picker closes it.
- **Picker content** The popup displays a predefined list of options.
- **Input value** Selecting an option updates the associated input with that value.

## Best for

- **Cross-device forms** Select controls that need to remain usable across mobile, tablet, and desktop layouts.
- **Mobile data entry** Touch-first forms where a bottom-positioned wheel scroller makes options easier to browse and select on a small screen.
- **Tablet forms** Interfaces where an input-anchored popover keeps the picker close to its field while providing touch-friendly scrolling.
- **Desktop workflows** Larger-screen forms where a compact desktop picker supports mouse-based option highlighting and selection.
- **Responsive product interfaces** Applications that need the same select field to adopt different display modes at predefined or custom breakpoints.

## Tutorial

```jsx
<Select
    responsive={{
        xsmall: {
            display: 'bottom',
            touchUi: true
        },
        small: {
            display: 'anchored',
            touchUi: true
        },
        custom: { // Custom breakpoint
            breakpoint: 800,
            display: 'anchored',
            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
- [`display`](https://mobiscroll.com/docs/react/select/api#opt-display) - option
- [`touchUi`](https://mobiscroll.com/docs/react/select/api#opt-touchUi) - option
- [`data`](https://mobiscroll.com/docs/react/select/api#opt-data) - option
- [`responsive`](https://mobiscroll.com/docs/react/select/api#opt-responsive) - option
- [`label`](https://mobiscroll.com/docs/react/select/api#opt-label) - option
- [`labelStyle`](https://mobiscroll.com/docs/react/select/api#opt-labelStyle) - option
- [`inputStyle`](https://mobiscroll.com/docs/react/select/api#opt-inputStyle) - option

## Code

### JSX

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

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

function App() {
  const myResponsive = useMemo(
    () => ({
      xsmall: {
        display: 'bottom',
      },
      small: {
        display: 'anchored',
      },
      custom: {
        // Custom breakpoint
        breakpoint: 800,
        display: 'anchored',
        touchUi: false,
      },
    }),
    [],
  );

  const myData = useMemo(
    () => [
      {
        text: 'Atlanta',
        value: 'atl',
      },
      {
        text: 'Berlin',
        value: 'ber',
      },
      {
        text: 'Boston',
        value: 'bos',
      },
      {
        text: 'Chicago',
        value: 'chi',
      },
      {
        text: 'London',
        value: 'lon',
      },
      {
        text: 'Los Angeles',
        value: 'la',
      },
      {
        text: 'New York',
        value: 'ny',
      },
      {
        text: 'Paris',
        value: 'par',
      },
      {
        text: 'San Francisco',
        value: 'sf',
      },
    ],
    [],
  );

  return (
    <Select
      data={myData}
      responsive={myResponsive}
      label="Select"
      labelStyle="stacked"
      inputStyle="outline"
      placeholder="Please select..."
    />
  );
}

export default App;
```

### TSX

```tsx
import { MbscResponsiveOptions, MbscSelectOptions, Select, setOptions } from '@mobiscroll/react';
import { FC, useMemo } from 'react';

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

const myData = [
  {
    text: 'Atlanta',
    value: 'atl',
  },
  {
    text: 'Berlin',
    value: 'ber',
  },
  {
    text: 'Boston',
    value: 'bos',
  },
  {
    text: 'Chicago',
    value: 'chi',
  },
  {
    text: 'London',
    value: 'lon',
  },
  {
    text: 'Los Angeles',
    value: 'la',
  },
  {
    text: 'New York',
    value: 'ny',
  },
  {
    text: 'Paris',
    value: 'par',
  },
  {
    text: 'San Francisco',
    value: 'sf',
  },
];

const App: FC = () => {
  const myResponsive: MbscResponsiveOptions<MbscSelectOptions> = useMemo(
    () => ({
      xsmall: {
        display: 'bottom',
      },
      small: {
        display: 'anchored',
      },
      custom: {
        // Custom breakpoint
        breakpoint: 800,
        display: 'anchored',
        touchUi: false,
      },
    }),
    [],
  );

  return (
    <Select
      data={myData}
      responsive={myResponsive}
      label="Select"
      labelStyle="stacked"
      inputStyle="outline"
      placeholder="Please select..."
    />
  );
};
export default App;
```

## Implementation notes

- `responsive` is an object keyed by breakpoint name, where each value is a partial options object applied when the viewport matches that breakpoint; this demo overrides `display` and `touchUi` per breakpoint, but any picker option can be set the same way.
- The five predefined breakpoint keys are `xsmall` (min-width 0px), `small` (min-width 576px), `medium` (min-width 768px), `large` (min-width 992px), and `xlarge` (min-width 1200px); a `custom` key is also supported for an arbitrary threshold.
- The `custom` breakpoint requires its own `breakpoint` field with a pixel value (e.g. `{ custom: { breakpoint: 800, display: 'anchored', touchUi: false } }`) - this is the only breakpoint entry that needs an explicit width, since the five named breakpoints have built-in widths.
- In this demo, `xsmall` sets `{ display: 'bottom', touchUi: true }`, `small` sets `{ display: 'anchored', touchUi: true }`, and the `custom` (800px) breakpoint sets `{ display: 'anchored', touchUi: false }` - so the picker moves from a touch bottom-sheet, to a touch-optimized anchored popover, to a pointer-optimized anchored popover as the viewport widens; `medium`/`large`/`xlarge` are left unset and fall through to the next-smaller matching breakpoint's values.
- `responsive` resolves at runtime as the viewport width crosses a breakpoint - no resize handler or manual `setOptions` call is needed; the component re-evaluates which breakpoint object applies and merges its overrides into the active options.
- The option is passed the same way across frameworks, just as a plain object: React `responsive={{...}}` prop on `<Select>`; Vue `:responsive="myResp"` binding a plain object on `<MbscSelect>`; Angular `[responsive]="myResp"` binding on `<mbsc-select>`; JS/jQuery `responsive: {...}` inside the options object passed to `mobiscroll.select(el, {...})` / `$(el).mobiscroll().select({...})`.
- `responsive` composes with the liquid/fluid layout the Select has by default - it is only needed when the picker's interaction pattern (not just its size) should change across breakpoints, e.g. switching `display` and `touchUi` together rather than relying on the picker's own responsive sizing.

## 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

- Previous: [Mobile & Desktop usage](https://demo.mobiscroll.com/react/select/mobile-desktop-usage.md) - React Select for desktop and mobile. Use a dropdown layout for desktop and native look on mobile.
- Next: [Understanding display modes](https://demo.mobiscroll.com/react/select/mobile-desktop-display.md) - React select/dropdown for mobile and desktop with top, bottom, popup, center, modal, anchored positioning.