---
title: "React Select Theming capabilities Example | Mobiscroll"
component: "Select"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/select/themes-ios-material-windows"
---

# Theming capabilities - React Select demo

React Select scroller with iOS, Material, Windows look & feel. Customize colors and styling with theme builder. For React and Next.JS.

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

## Description

The look and feel of the select can be deeply customized. There are four levels of customization:

- **Base themes:** Choose between **iOS**, **Material** and **Windows**.
- **Light or dark:** Every theme has a `light` and `dark` variant. Setting the `themeVariant` to `'auto'` will switch based on system settings.
- **Custom themes:** Use the [theme builder](https://mobiscroll.com/themebuilder) to customize the colors and make it match your brand.
- **Custom CSS:** If you need further customization, the sky is the limit with CSS overrides.

You can also see how every example looks by changing the theme from the header.

## What this demo shows

- An inline, single-value select is displayed alongside theme controls for previewing different appearances in the same layout.
- **Theme controls:** A segmented control switches between the `iOS`, `Material`, and `Windows` base themes, with `iOS` selected by default.
- **Theme variant:** A dark-theme switch is enabled by default, showing the select with the dark theme variant.
- **Custom theme option:** A separate switch for Theme Builder or Sass-based customization is available and disabled by default.
- **Inline select:** The picker is embedded directly in the page without an input by using inline display mode.
- **Picker content:** The available options are displayed 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.

## Best for

- **Theme comparison:** Comparing the same select component across the `iOS`, `Material`, and `Windows` base themes.
- **Light and dark theme previews:** Checking the select's appearance with light and dark theme variants.
- **Branded select experiences:** Exploring how Theme Builder, Sass, or custom CSS can extend a base theme to match a product's visual style.

## Tutorial

### Pick a base theme

- (x) iOS
- ( ) Material
- ( ) Windows

### Then choose between light or dark theme variant

- [ ] Turn dark theme on

### Or build a custom theme based on any base theme

- [ ] Use the [theme builder](https://mobiscroll.com/themebuilder) or [Sass](https://mobiscroll.com/docs/react/select/css-variables) to customize themes

```jsx
<Select
    theme="ios"
    themeVariant="light"
/>
```

With "Material":

```jsx
<Select
    theme="material"
    themeVariant="light"
/>
```

With "Windows":

```jsx
<Select
    theme="windows"
    themeVariant="light"
/>
```

## API used in this demo

- [`data`](https://mobiscroll.com/docs/react/select/api#opt-data) - option
- [`display`](https://mobiscroll.com/docs/react/select/api#opt-display) - option
- [`theme`](https://mobiscroll.com/docs/react/select/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/select/api#opt-themeVariant) - option

## Code

### JSX

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

setOptions({
});

function App() {
  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}
      display="inline"
      theme="material" // Can be 'ios', 'material', 'windows' or 'auto' - in case of 'auto', the theme will automatically be set based on the platform
      themeVariant="dark" // Can be 'light', 'dark' or 'auto' - in case of 'auto' it is set based in the active system theme
    />
  );
}

export default App;
```

### TSX

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

setOptions({
});

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',
  },
];

function App() {
  return (
    <Select
      data={myData}
      display="inline"
      theme="material" // Can be 'ios', 'material', 'windows' or 'auto' - in case of 'auto', the theme will automatically be set based on the platform
      themeVariant="dark" // Can be 'light', 'dark' or 'auto' - in case of 'auto' it is set based in the active system theme
    />
  );
}

export default App;
```

## Implementation notes

- `theme` selects the base visual theme by name: `'ios'`, `'material'`, or `'windows'`. It can be changed at runtime via `.setOptions({ theme: '<name>' })` on the select instance.
- `themeVariant` selects `'light'`, `'dark'`, or `'auto'` (follows system/OS dark-mode setting); combined with `theme`, e.g. `theme: 'ios'` + `themeVariant: 'dark'`. Also settable at runtime through `.setOptions({ themeVariant })`.
- A custom (Theme Builder-generated) theme is applied by passing its generated theme name as the `theme` value instead of a base name, e.g. `'material-indigo'`, `'windows-yellow'`, `'ios-gray'` - in that mode `themeVariant` is not set alongside it, since the custom theme name already encodes light/dark.
- `display: 'inline'` renders the option list directly on the page (no separate trigger input), used here so the theme changes are visible immediately without opening a popup.
- Per framework: JS/jQuery pass `theme`/`themeVariant` inside `.select({ ... })` at init and update them later via `.setOptions({ theme, themeVariant })`; React sets `theme`/`themeVariant` as props on `<Select>`; Angular binds `theme`/`themeVariant` as plain (non-bracketed) string attributes on `<mbsc-select>` since they're static per render; Vue sets `theme`/`themeVariant` as plain string attributes on `<MbscSelect>`.
- Beyond the `theme`/`themeVariant` options, deeper customization (brand colors, spacing) is done outside the component API - through the Theme Builder tool or Sass variable overrides - and isn't controlled through select instance options.

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