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

# Responsive behavior - JavaScript Select demo

Responsive setup of the Javascript select. Change the rendering and positioning dynamically, based on screen size. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/select/responsive)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/pickers/select/responsive)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/select/responsive.md), [Angular](https://demo.mobiscroll.com/angular/select/responsive.md), [React](https://demo.mobiscroll.com/react/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/javascript/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

```js
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/javascript/select/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/select/api#opt-themeVariant) - option
- [`inputElement`](https://mobiscroll.com/docs/javascript/select/api#opt-inputElement) - option
- [`responsive`](https://mobiscroll.com/docs/javascript/select/api#opt-responsive) - option
- [`display`](https://mobiscroll.com/docs/javascript/select/api#opt-display) - option
- [`touchUi`](https://mobiscroll.com/docs/javascript/select/api#opt-touchUi) - option

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

mobiscroll.select('#demo-responsive', {
  inputElement: document.getElementById('demo-responsive-input'),
  responsive: {
    xsmall: {
      display: 'bottom',
    },
    small: {
      display: 'anchored',
    },
    custom: {
      // Custom breakpoint
      breakpoint: 800,
      display: 'anchored',
      touchUi: false,
    },
  },
});
```

### HTML

```html
<label>
    Select
    <input mbsc-input id="demo-responsive-input" placeholder="Please select..." data-dropdown="true" data-input-style="outline" data-label-style="stacked" />
</label>
<select id="demo-responsive">
    <option value="1">Atlanta</option>
    <option value="2">Berlin</option>
    <option value="3">Boston</option>
    <option value="4">Chicago</option>
    <option value="5">London</option>
    <option value="6">Los Angeles</option>
    <option value="7">New York</option>
    <option value="8">Paris</option>
    <option value="9">San Francisco</option>
</select>
```

## 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-javascript.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 javascript
   ```

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 javascript --trial`.

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

## Related demos

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