MeMultipleSelect

Select de seleção múltipla com suporte a checkboxes, busca por texto, limpeza de seleção, badges nas opções e navegação por teclado.

Playground

Importação

<script setup>
import { MeMultipleSelect } from '@me/ui-vue3'
</script>

Uso Básico

Selecione

keyboard_arrow_down

<script setup>
import { ref } from 'vue'

const values = ref([])
const options = [
  { text: 'Opção 1', value: 1 },
  { text: 'Opção 2', value: 2 },
  { text: 'Opção 3', value: 3 },
]
</script>

<template>
  <MeMultipleSelect v-model="values" :options="options" />
</template>

Com Label

Use a prop label para exibir um rótulo acima do select.

Categorias

Selecione

keyboard_arrow_down

<MeMultipleSelect
  v-model="values"
  label="Categorias"
  :options="options"
/>

Clearable

Adiciona um botão de limpeza quando há itens selecionados. Emite @clear ao limpar.

Selecionado 1 de 3

playlist_remove

keyboard_arrow_down

<MeMultipleSelect
  v-model="values"
  :options="options"
  clearable
  @clear="onClear"
/>

Searchable

Exibe um campo de busca ao abrir o dropdown. A busca ignora acentos e é case-insensitive.

Buscar estado...

keyboard_arrow_down

<MeMultipleSelect
  v-model="values"
  :options="states"
  searchable
  placeholder="Buscar estado..."
/>

Sem Checkboxes

Use :show-checkboxes="false" para uma lista mais compacta, sem os marcadores de seleção.

Selecione

keyboard_arrow_down

Selecione

keyboard_arrow_down

<!-- Com checkboxes (padrão) -->
<MeMultipleSelect v-model="values" :options="options" />

<!-- Sem checkboxes -->
<MeMultipleSelect v-model="values" :options="options" :show-checkboxes="false" />

Com Badges

Adicione tag a uma opção para exibir um badge ao lado do texto.

Selecione

keyboard_arrow_down

<script setup>
const options = [
  { text: 'Ativo',    value: 'active',   tag: { message: 'Novo',    variant: 'green'  } },
  { text: 'Pendente', value: 'pending',  tag: { message: 'Atenção', variant: 'orange' } },
  { text: 'Inativo',  value: 'inactive', tag: { message: 'Inativo', variant: 'gray'   } },
]
</script>

<template>
  <MeMultipleSelect v-model="values" :options="options" />
</template>

Opções Desabilitadas

Defina disabled: true em uma opção para torná-la não selecionável.

Selecione

keyboard_arrow_down

<script setup>
const options = [
  { text: 'Disponível',   value: 1 },
  { text: 'Indisponível', value: 2, disabled: true },
  { text: 'Disponível 2', value: 3 },
]
</script>

<template>
  <MeMultipleSelect v-model="values" :options="options" />
</template>

Disabled

Selecionado 1 de 3

keyboard_arrow_down

<MeMultipleSelect
  v-model="values"
  :options="options"
  disabled
/>

Eventos

Selecione

keyboard_arrow_down

Último evento: Nenhum

<script setup>
import { ref } from 'vue'

const values = ref([])
const lastEvent = ref('Nenhum')
</script>

<template>
  <MeMultipleSelect
    v-model="values"
    :options="options"
    clearable
    @change="(vals) => lastEvent = `change: [${vals.join(', ')}]`"
    @open="lastEvent = 'open'"
    @close="lastEvent = 'close'"
    @clear="lastEvent = 'clear'"
  />
  <p>Último evento: <strong>{{ lastEvent }}</strong></p>
</template>

API

Props

Prop	Tipo	Padrão	Descrição
modelValue	(string | number)[]	[]	Valores selecionados — use com v-model
options	OptionSingleSelectType[]	[]	Lista de opções disponíveis
placeholder	string	'Selecione'	Texto exibido quando nenhum item está selecionado
label	string	undefined	Texto do label exibido acima do select
disabled	boolean	false	Desabilita o select
searchable	boolean	false	Habilita campo de busca/filtro nas opções
clearable	boolean	false	Exibe botão para limpar toda a seleção
showCheckboxes	boolean	true	Exibe checkboxes ao lado das opções
openDirection	'down' | 'up'	'down'	Direção de abertura do dropdown

Tipo das Opções

type OptionSingleSelectType = {
  text: string                    // Texto exibido na lista
  value: string | number | null   // Valor emitido no v-model
  disabled?: boolean              // Desabilita a opção
  params?: unknown                // Dados extras opcionais
  tag?: {                         // Badge ao lado do texto
    message: string
    variant: string               // 'green' | 'orange' | 'gray' | ...
  }
}

Eventos

Evento	Payload	Descrição
update:modelValue	(string | number)[]	Emitido ao selecionar/desselecionar — use com v-model
change	(string | number)[]	Emitido após qualquer alteração na seleção
clear	—	Emitido ao limpar toda a seleção
open	—	Emitido ao abrir o dropdown
close	—	Emitido ao fechar o dropdown
focus	—	Emitido ao focar o componente
blur	—	Emitido ao perder o foco
inputChange	string | (string | number)[]	Emitido ao digitar na busca ou ao limpar a seleção

Acessibilidade

• Implementa o padrão WAI-ARIA Combobox com role="combobox", role="listbox" e role="option"
• aria-multiselectable="true" indica ao leitor de tela que múltiplas opções podem ser selecionadas
• aria-expanded reflete o estado do dropdown
• aria-activedescendant aponta para o item com foco no teclado
• Opções desabilitadas têm aria-disabled="true"

Navegação por Teclado

Tecla	Ação
Enter / Space	Abre/fecha o dropdown ou seleciona/deseleciona o item focado
ArrowDown	Move o foco para a próxima opção (pula desabilitadas)
ArrowUp	Move o foco para a opção anterior (pula desabilitadas)
Escape	Fecha o dropdown e devolve o foco ao trigger
Tab	Fecha o dropdown e avança o foco

Posicionamento inteligente

O MeMultipleSelect detecta automaticamente o espaço disponível na viewport e abre para cima quando não há espaço suficiente abaixo. Use :open-direction="'up'" para forçar sempre para cima.