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

# Responsive behavior - Angular Select demo

Responsive setup of the Angular select. Change the rendering and positioning dynamically, based on screen size.

- [Live demo](https://demo.mobiscroll.com/angular/select/responsive)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/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), [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/angular/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

```ts
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/angular/select/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/select/api#opt-themeVariant) - option
- [`responsive`](https://mobiscroll.com/docs/angular/select/api#opt-responsive) - option
- [`display`](https://mobiscroll.com/docs/angular/select/api#opt-display) - option
- [`touchUi`](https://mobiscroll.com/docs/angular/select/api#opt-touchUi) - option
- [`data`](https://mobiscroll.com/docs/angular/select/api#opt-data) - option
- [`label`](https://mobiscroll.com/docs/angular/select/api#opt-label) - option
- [`labelStyle`](https://mobiscroll.com/docs/angular/select/api#opt-labelStyle) - option
- [`inputStyle`](https://mobiscroll.com/docs/angular/select/api#opt-inputStyle) - option

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, setOptions } from '@mobiscroll/angular';

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {
  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',
    },
  ];

  responsive: any = {
    xsmall: {
      display: 'bottom',
    },
    small: {
      display: 'anchored',
    },
    custom: {
      // Custom breakpoint
      breakpoint: 800,
      display: 'anchored',
      touchUi: false,
    },
  };
}
```

### Template

```html
<mbsc-page>
  <mbsc-select
    [data]="myData"
    [responsive]="responsive"
    label="Select"
    labelStyle="stacked"
    inputStyle="box"
    placeholder="Please select..."
  ></mbsc-select>
</mbsc-page>
```

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

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

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

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

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

## Related demos

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