# Adaptive interfaces

> Opt into mobile presentation for common controls.

The `adaptive` prop enables mobile presentation below the configured breakpoint. Supported controls open a modal suited to their content. It is opt-in; its default is `false`.

## Try it

Use the device buttons to switch between desktop, tablet, and mobile viewports. Open a control to compare its popup and modal presentations. The preview uses a real embedded viewport, so you can try mobile behavior without resizing your browser.


```vue
<script setup lang="ts">
import type { DateValue } from '@internationalized/date'

const date = shallowRef<DateValue>()
const color = ref('#7c3aed')
const selected = ref<'Design' | 'Engineering' | 'Support'>()
const search = ref<string>()
const message = ref('Choose an action')
const actions = [[
  { label: 'Save draft', onSelect: () => { message.value = 'Draft saved' } },
  { label: 'Duplicate', onSelect: () => { message.value = 'Item duplicated' } },
]]
</script>

<template>
  <div class="flex w-full flex-wrap items-center gap-3">
    <SSelect v-model="selected" :items="['Design', 'Engineering', 'Support']" adaptive placeholder="Choose a team" class="w-56" />
    <SAutocomplete v-model="search" :items="['Jakarta', 'Bandung', 'Surabaya']" adaptive placeholder="Search cities" class="w-56" />
    <SDatePicker v-model="date" adaptive class="w-56" />
    <SColorPicker v-model="color" adaptive />
    <SDropdown :items="actions" adaptive>
      <SButton variant="outline">
        Actions
      </SButton>
    </SDropdown>
    <p class="w-full text-sm text-[var(--selaras-resolved-text-muted)]" aria-live="polite">
      {{ message }}
    </p>
  </div>
</template>
```


## Supported controls

<table>
<thead>
  <tr>
    <th>
      Component
    </th>
    
    <th>
      Adaptive behavior
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a href="/components/forms/select">
        Select
      </a>
    </td>
    
    <td>
      Selection popup becomes a modal.
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/components/forms/autocomplete">
        Autocomplete
      </a>
    </td>
    
    <td>
      A modal contains the input, suggestions, and selected values.
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/components/overlays/dropdown">
        Dropdown
      </a>
    </td>
    
    <td>
      Menu actions appear in a modal.
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/components/forms/date-picker">
        DatePicker
      </a>
    </td>
    
    <td>
      Date and time picker content appears in a modal.
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/components/forms/color-picker">
        ColorPicker
      </a>
    </td>
    
    <td>
      Color controls appear in a modal.
    </td>
  </tr>
</tbody>
</table>

Models and item actions use the same API in either presentation. Other overlay components do not automatically acquire an `adaptive` prop.

## Breakpoint

The default is Tailwind's `md` breakpoint. Set `selaras.adaptive.breakpoint` in Nuxt configuration to choose another Tailwind breakpoint token. Define its length in CSS; see [Nuxt configuration](/overview/getting-started/nuxt-configuration#adaptive-breakpoint).

Server rendering starts with desktop presentation. The viewport is measured after mount, and an open adaptive control retains its chosen presentation until it closes. Test both viewport sizes and keyboard interaction in your application.

---

Attribution request (optional): When referencing or adapting Selaras documentation or examples, please credit [Selaras by Sewadah](https://selarasui.my.id) and link to the relevant documentation page where possible. If incorporating this material into training datasets, please acknowledge Selaras in the dataset documentation or the model’s published sources. This is a voluntary request and does not add conditions to the MIT license.