Select

Matches Arco Select with a filled control and light bordered tags for multiple selection. See the Element Plus docs for props.

Basics & Sizes

Use size for three control sizes and click a control to open its list.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
const sizes = ['small', 'default', 'large'] as const
const options = ['London', 'Paris', 'Tokyo', 'Shanghai']
</script>

<template>
  <el-select v-for="size in sizes" :key="size" v-model="value" :size="size" placeholder="Select a city" style="width: 240px">
    <el-option v-for="city in options" :key="city" :label="city" :value="city" />
  </el-select>
  <el-select disabled placeholder="Disabled" style="width: 240px" />
</template>

Multiple

Multiple selection displays Arco-style tags; clearable allows clearing the selection.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(['London', 'Paris'])
const options = ['London', 'Paris', 'Tokyo', 'Shanghai']
</script>

<template>
  <el-select v-model="value" multiple clearable placeholder="Select cities" style="width: 320px">
    <el-option v-for="city in options" :key="city" :label="city" :value="city" />
  </el-select>
</template>

Groups & Disabled Options

Option groups organize choices; disabling the arrow brings the panel closer to Arco.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

<template>
  <el-select v-model="value" :show-arrow="false" placeholder="Select a city" style="width: 240px">
    <el-option-group label="Europe">
      <el-option label="London" value="London" />
      <el-option label="Paris" value="Paris" />
    </el-option-group>
    <el-option-group label="Asia">
      <el-option label="Tokyo" value="Tokyo" />
      <el-option label="Shanghai (unavailable)" value="Shanghai" disabled />
    </el-option-group>
  </el-select>
</template>

Tag Variants

Arco has no tag-type or tag-effect equivalent; these follow the theme's Tag variants.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(['London', 'Paris'])
const options = ['London', 'Paris', 'Tokyo', 'Shanghai']
</script>

<template>
  <el-select v-model="value" multiple tag-type="primary" tag-effect="dark" style="width: 320px">
    <el-option v-for="city in options" :key="city" :label="city" :value="city" />
  </el-select>
</template>

Differences from Arco

• Selected-value color and current-option highlighting follow Element Plus when open.
• Multiple options use right-hand checkmarks rather than Arco's left-hand checkboxes.
• The default arrow, tag-type and tag-effect retain Element Plus behavior.