Select

Default

Add a select element with the s-select component and the s-option sub component

Code copied

<template>
  <div class="center con-selects">
    <s-select v-model="value" placeholder="Select">
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>
      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option disabled label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
</script>

<style scoped lang="scss">
.con-selects {
  .s-select {
    margin: 15px 10px;
    max-width: calc(40% - 20px);
  }
}

@media (max-width: 500px) {
  .con-selects {
    .s-select {
      max-width: 100%;
    }
  }
}
</style>

Color

Change the color of the component with the color property, the allowed values ​​are the main colors of Sax Design and the colors (RGB and HEX)

Code copied

<template>
  <div class="center con-selects">
    <s-select v-model="value" label="Sax Design color" label-float color="danger">
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>
      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>

    <s-select v-model="value" label="Custom color" label-float color="#7d33ff">
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>
      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
</script>

Label

Add a label to the select easily with the label property, you can also add a label-placeholder which as its name says is a placeholder that encourages label, and finally the placeholder with the placeholder property

Code copied

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
</script>

<template>
  <div class="center con-selects">
    <s-select v-model="value1" label="Label">
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>
      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>

    <s-select v-model="value2" label="Label placeholder" label-float>
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>
      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>

    <s-select v-model="value3" placeholder="Placeholder">
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>

      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>
  </div>

Group

Group options within the select with the sub-component s-option-group, as the required prop is the title to add a title to the item group

Code copied

<template>
  <div class="center con-selects">
    <s-select v-model="value1" label="Group" placeholder="Group">
      <s-option-group label="Vuejs">
        <!-- PROP: label is required -->
        <s-option label="Sax Design" value="1"> Sax Design </s-option>
        <s-option label="Vue" value="2"> Vue </s-option>
        <s-option label="Javascript" value="3"> Javascript </s-option>
      </s-option-group>
      <s-option-group label="Others">
        <s-option label="Sass" value="4"> Sass </s-option>
        <s-option label="Typescript" value="5"> Typescript </s-option>
        <s-option label="Webpack" value="6"> Webpack </s-option>
        <s-option label="Nodejs" value="7"> Nodejs </s-option>
      </s-option-group>
    </s-select>

    <s-select v-model="value2" label="Group Filter" filter placeholder="Filter">
      <s-option-group label="Vuejs">
        <s-option label="Sax Design" value="1"> Sax Design </s-option>
        <s-option label="Vue" value="2"> Vue </s-option>
        <s-option label="Javascript" value="3"> Javascript </s-option>
      </s-option-group>
      <s-option-group label="Others">
        <s-option label="Sass" value="4"> Sass </s-option>
        <s-option label="Typescript" value="5"> Typescript </s-option>
        <s-option label="Webpack" value="6"> Webpack </s-option>
        <s-option label="Nodejs" value="7"> Nodejs </s-option>
      </s-option-group>
    </s-select>

    <s-select
      v-model="value3"
      label="Group Multiple Filter"
      filter
      multiple
      placeholder="Group Multiple Filter"
    >
      <s-option-group label="Vuejs">
        <s-option label="Sax Design" value="1"> Sax Design </s-option>
        <s-option label="Vue" value="2"> Vue </s-option>
        <s-option label="Javascript" value="3"> Javascript </s-option>
      </s-option-group>
      <s-option-group label="Others">
        <s-option label="Sass" value="4"> Sass </s-option>
        <s-option label="Typescript" value="5"> Typescript </s-option>
        <s-option label="Webpack" value="6"> Webpack </s-option>
        <s-option label="Nodejs" value="7"> Nodejs </s-option>
      </s-option-group>
    </s-select>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref(['3'])

const value3 = ref(['1'])
</script>

<style scoped lang="scss">
.con-selects {
  .s-select-content {
    margin: 10px;

  }
}

@media (max-width: 500px) {
  .con-selects {
    .s-select-content {
      max-width: 100%;
    }
  }
}
</style>

Filter

You can add the functionality of filtering options with the filter property, this property is a boolean so you can add it without any value

Code copied

<template>
  <div class="center con-selects">
    <s-select
      v-model="value"
      placeholder="Filter with default first matched"
      filter
      default-first-option
    >
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>
      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>
    <s-select v-model="value2" filter multiple placeholder="Filter Multiple">
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>
      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>
    <s-select
      v-model="value3"
      placeholder="Filter with allow create"
      filter
      allow-create
    >
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>
      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option disabled label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const value2 = ref('')
const value3 = ref('')
</script>

<style scoped lang="scss">
.con-selects {
  .s-select-content {
    margin: 10px;
    max-width: calc(40% - 20px);
  }
}

@media (max-width: 500px) {
  .con-selects {
    .s-select-content {
      max-width: 100%;
    }
  }
}
</style>

Multiple

Add the functionality of multiple selection of options with the multiple property, this property is a boolean so you can add it without any value

Multiple Selects measure their available width by default and automatically replace tags that do not fit with +N. Set collapse-chips to false to allow tags to wrap; max-collapse-chips is only an optional upper limit.

The value of the select must be an array

Code copied

<template>
  <div class="con-selects">
    <s-select
      v-model="value"
      label="Multiple"
      block
      multiple
      danger
      placeholder="Filter"
    >
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>
      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>
    <s-select
      v-model="value2"
      label="Filter Multiple"
      block
      filter
      multiple
      placeholder="Filter Multiple"
    >
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>
      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>

    <s-select
      v-model="value3"
      label="Adaptive collapsed tags"
      block
      filter
      multiple
      collapse-chips
      placeholder="Resize to see tags adapt"
    >
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>
      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref(['1', '2', '3'])
const value2 = ref(['4'])
const value3 = ref(['1', '2', '3', '4', '5', '6', '7'])
</script>

<style scoped lang="scss">
.con-selects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
  gap: 32px 24px;
  width: 100%;
}
</style>

Loading

Add a loading animation to the select with the loading property, this property is a boolean so you can add it without any value

Code copied

<template>
  <div class="center con-selects">
    <s-select v-model="value1" placeholder="Success" loading>
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>
      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>

    <s-select v-model="value2" placeholder="Warn" loading multiple>
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>
      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref('3')
const value2 = ref(['4', '1', '3'])
</script>

State

Change the style of the component to the color passed in the state property, the allowed colors are only the main ones of Sax Design

This property can be used to indicate a missing field to the user or when something is ready.

Code copied

<template>
  <div class="center con-selects">
    <s-select
      v-for="(color, index) in colors"
      :key="index"
      v-model="color.value"
      :state="color.color"
      :label="color.color"
      placeholder="Select"
    >
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>
      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>
  </div>
</template>

<script lang="ts" setup>
import type { Color } from 'sax-design-vue'

const colors: { color: Color; value: string }[] = [
  {
    color: 'primary',
    value: '1',
  },
  {
    color: 'danger',
    value: '1',
  },
  {
    color: 'success',
    value: '2',
  },
  {
    color: 'warn',
    value: '3',
  },
  {
    color: 'dark',
    value: '4',
  },
]
</script>

<style scoped lang="scss">
.con-selects {
  .s-select {
    margin: 10px;
  }
}
</style>

Message

Add an item below the select showing a message to the user

Code copied

<template>
  <div class="center con-selects">
    <s-select v-model="value1" placeholder="Success">
      <template #message-success> Option Valid </template>
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>
      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>

    <s-select v-model="value2" placeholder="Warn">
      <template #message-danger> Required </template>
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>
      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>

    <s-select v-model="value3" placeholder="Danger">
      <template #message-warn>
        Select your country where you are currently
      </template>
      <s-option label="Sax Design" value="1"> Sax Design </s-option>
      <s-option label="Vue" value="2"> Vue </s-option>
      <s-option label="Javascript" value="3"> Javascript </s-option>
      <s-option label="Sass" value="4"> Sass </s-option>
      <s-option label="Typescript" value="5"> Typescript </s-option>
      <s-option label="Webpack" value="6"> Webpack </s-option>
      <s-option label="Nodejs" value="7"> Nodejs </s-option>
    </s-select>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
</script>

<style scoped lang="scss">
.con-selects {
  align-items: flex-start;
  .s-select-content {
    margin: 10px;
  }
}
</style>

Data source

Use options and option-groups when data arrives from an API. option-props and option-group-props map existing field names; filterable is an alias of filter.

Code copied

<template>
  <div class="select-data-demo">
    <s-select
      v-model="value"
      filterable
      placeholder="Data driven options"
      :options="options"
      :option-props="{ value: 'id', label: 'text' }"
      :option-groups="groups"
      :option-group-props="{ label: 'title', options: 'items' }"
      :popup-config="{ width: 260 }"
    />
  </div>
</template>

<script lang="ts" setup>

const value = ref('')
const options = [
  { id: 'new', text: 'New York' },
  { id: 'ldn', text: 'London' },
]
const groups = [
  {
    title: 'Asia',
    items: [
      { id: 'sha', text: 'Shanghai' },
      { id: 'tky', text: 'Tokyo', disabled: true },
    ],
  },
]
</script>

<style scoped>
.select-data-demo {
  max-width: 260px;

Popup configuration

Use popup-config to control panel sizing, trigger-width matching, offset, mount target and custom styles. The first Select uses full to match its trigger; the second combines width and height limits with offset, appendTo, placement, className and style. The demo mounts to body; inside a dialog, replace appendTo with an existing container selector or element.

Code copied

<template>
  <div class="select-popup-config-demo">
    <div class="select-popup-config-demo__fields">
      <div class="select-popup-config-demo__field">
        <s-select
          v-model="fullValue"
          block
          :options="options"
          placeholder="full + maxHeight"
          :popup-config="{
            full: true,
            maxHeight: 160,
          }"
        />
      </div>

      <div class="select-popup-config-demo__field">
        <s-select
          v-model="customValue"
          block
          strategy="fixed"
          :options="options"
          placeholder="width + offset + style"
          :popup-config="customPopupConfig"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import type { SelectPopupConfig } from '@vuesax-alpha/components/select'

const fullValue = shallowRef('')
const customValue = shallowRef('')

const options = [
  { value: 'design', label: 'Design system' },
  { value: 'frontend', label: 'Frontend platform' },
  { value: 'quality', label: 'Quality engineering' },
  { value: 'docs', label: 'Documentation' },
  { value: 'mobile', label: 'Mobile application' },
  { value: 'data', label: 'Data platform' },
  { value: 'security', label: 'Security center' },
  { value: 'operations', label: 'Operations console' },
]

const customPopupConfig: SelectPopupConfig = {
  appendTo: 'body',
  width: 280,
  minWidth: 220,
  maxWidth: 'calc(100vw - 32px)',
  maxHeight: 160,
  offset: 8,
  placement: 'bottom-start',
  className: 'select-popup-config-panel',
  style: {
    borderRadius: 'var(--sax-radius-lg)',
    padding: '8px',
  },
}
</script>

<style scoped>
.select-popup-config-demo {
  position: relative;
  width: min(100%, 560px);
}

.select-popup-config-demo__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.select-popup-config-demo__field {
  width: min(100%, 240px);
}
</style>

Search matching and highlighting

Use filter-option for matching, highlight-search to mark the matching text and show-selected-mark for a selected indicator.

Code copied

<template>
  <s-select
    v-model="value"
    filterable
    highlight-search
    show-selected-mark
    search-placeholder="Search a city"
    placeholder="Choose a city"
    :options="options"
    :filter-option="filterOption"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const options = [
  { value: 'shanghai', label: 'Shanghai' },
  { value: 'shenzhen', label: 'Shenzhen' },
  { value: 'hangzhou', label: 'Hangzhou' },
]

const filterOption = (query: string, option: (typeof options)[number]) =>
  option.label.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase())
</script>

Multiple selection tools and footer

selection-tools selects, inverts or clears the current filtered results. The footer slot receives counts and bulk actions, with no refresh behavior built in.

Code copied

<template>
  <s-select
    v-model="value"
    multiple
    filterable
    multiple-display-mode="text"
    :options="options"
    :selection-tools="['all', 'invert', 'clear']"
    :get-display-value="getDisplayValue"
    :placeholder="t('vs.select.placeholder')"
    :search-placeholder="t('vs.select.search')"
  >
    <template #footer="{ selectedCount, totalCount }">
      <div class="select-selection-summary">
        <span>{{
          t('vs.select.selectedCount', { count: selectedCount })
        }}</span>
        <span>{{ t('vs.select.totalCount', { count: totalCount }) }}</span>

    </template>
  </s-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useLocale } from '@vuesax-alpha/hooks'

const { t } = useLocale()
const value = ref<string[]>(['ada'])
const options = [
  { value: 'ada', label: 'Ada Lovelace' },
  { value: 'grace', label: 'Grace Hopper' },
  { value: 'linus', label: 'Linus Torvalds' },

Cached option labels

When remote pagination or searching replaces options, pass cached-options to retain selected labels. Use header and footer for the two popup regions.

Code copied

<template>
  <s-select
    v-model="value"
    filterable
    clearable
    :options="currentPage"
    :cached-options="selectedCache"
    placeholder="Remote result"
  >
    <template #header>Current search page</template>
    <template #footer="{ selectedCount, totalCount }">
      {{ selectedCount ? 'Selection restored from cache' : 'No selection' }} ·
      {{ totalCount }} current options
    </template>
  </s-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('archived-user')
const currentPage = [
  { value: 'current-user', label: 'Current page result' },
  { value: 'next-user', label: 'Another result' },
]
const selectedCache = [
  { value: 'archived-user', label: 'Cached selected user' },
]
</script>

Pinned options

Set pin-key to persist pinned values in local storage. Hover an option to reveal its pin action, or press Ctrl+P on the keyboard-highlighted option. For server persistence, provide get-pin-options, pin-method and unpin-method together. auto-use-option selects the first pinned enabled option, falling back to the first enabled option.

Code copied

<template>
  <div class="select-pinning-demo">
    <s-select
      v-model="value"
      block
      pin-key="documentation"
      :options="options"
      :placeholder="t('vs.select.placeholder')"
      :popup-config="{ full: true }"
      @pin-change="lastAction = $event"
    />
    <small>
      {{
        lastAction
          ? `${lastAction.value} ${t(
              lastAction.pinned ? 'vs.select.pinned' : 'vs.select.unpinned',
            )}`
          : t('vs.select.pinHint')
      }}
    </small>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useLocale } from '@vuesax-alpha/hooks'

const { t } = useLocale()
const value = ref('')
const lastAction = ref<{ value: string; pinned: boolean }>()
const options = [
  { value: 'design', label: 'Design system' },
  {
    value: 'frontend',
    label: 'Frontend platform with a deliberately long option name',
  },
  { value: 'quality', label: 'Quality engineering' },
  { value: 'docs', label: 'Documentation' },
]
</script>

<style scoped>
.select-pinning-demo {
  display: grid;
  gap: 10px;
  width: 260px;
}
.select-pinning-demo small {
  color: #637083;
}
</style>

Virtual options

Enable virtual for large flat options arrays. Filtering, keyboard navigation and selected-value caching stay available while only visible rows mount. Dynamic measurement is on by default, so wrapped labels and custom option content may use different row heights; set virtual-config.dynamic to false only for truly fixed rows.

Code copied

<template>
  <div class="select-virtual-demo">
    <s-select
      v-model="value"
      filterable
      virtual
      :virtual-config="{
        threshold: 100,
        estimateSize: 40,
        overscan: 8,
        dynamic: true,
      }"
      :options="options"
      :option-props="{ value: 'id', label: 'text' }"
      placeholder="Search 1,000 cities"
      :popup-config="{ width: 280, height: 260 }"
    >
      <template #option="{ option }">
        <span class="virtual-option">
          <strong>{{ option.text }}</strong>
          <small v-if="option.description">{{ option.description }}</small>
        </span>
      </template>
    </s-select>
    <small>Selected: {{ value || '—' }}</small>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const options = Array.from({ length: 1000 }, (_, index) => ({
  id: `city-${index + 1}`,
  text: `City ${String(index + 1).padStart(4, '0')}`,
  description:
    index % 7 === 0
      ? 'A longer secondary line makes this row taller and is measured after rendering.'
      : '',
  disabled: index % 97 === 0,
}))
</script>

<style scoped>
.select-virtual-demo {
  display: grid;
  gap: 10px;
  max-width: 280px;
}
.select-virtual-demo small {
  color: #637083;
}
.virtual-option {
  display: grid;
  min-width: 0;
  line-height: 1.35;
}
.virtual-option small {
  white-space: normal;
}
</style>

API