MultiSelect

Visão geral

Permite o usuário pesquisar e selecionar uma opção ou mais em uma lista.

Exemplo MultiSelect (objetos)

Exemplo MultiSelect (valores)

Clique para exibir o código

vue

<script setup>
import { ref } from 'vue'
import { LxMultiSelect } from '@/index';

const objSelecionado = ref();
const tecnologias = ref([
	{ Nome: 'Vue.js', Id: 'vu' },
	{ Nome: 'Javascript', Id: 'js' },
	{ Nome: 'Open Source', Id: 'os' },
	{ Nome: 'CSS', Id: 'css' },
	{ Nome: '.NET', Id: 'net' },
	{ Nome: 'HTML', Id: 'ht' }
]);

const statusSelecionado = ref();
const status = ref([
	"Análise",
	"Processando",
	"Finalizado",
	"Cancelado"
]);
</script>

<template>
	<div class="row">
		<div class="col-6">
			<LxMultiSelect
				v-model="objSelecionado"
				label="Exemplo MultiSelect (objetos)"
				:options="tecnologias"
				:options-label="({ Nome, Id }) => `${Nome} (Cód: ${Id})`"
				options-key="Id"
			/>
		</div>

		<div class="col-6">
			<LxMultiSelect
				v-model="statusSelecionado"
				label="Exemplo MultiSelect (valores)"
				:options="status"
			/>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { LxMultiSelect } from '@/index';

const objSelecionado = ref();
const tecnologias = ref([
	{ Nome: 'Vue.js', Id: 'vu' },
	{ Nome: 'Javascript', Id: 'js' },
	{ Nome: 'Open Source', Id: 'os' },
	{ Nome: 'CSS', Id: 'css' },
	{ Nome: '.NET', Id: 'net' },
	{ Nome: 'HTML', Id: 'ht' }
]);

const statusSelecionado = ref();
const status = ref([
	"Análise",
	"Processando",
	"Finalizado",
	"Cancelado"
]);
</script>

<template>
	<div class="row">
		<div class="col-6">
			<LxMultiSelect
				v-model="objSelecionado"
				label="Exemplo MultiSelect (objetos)"
				:options="tecnologias"
				:options-label="({ Nome, Id }) => `${Nome} (Cód: ${Id})`"
				options-key="Id"
			/>
		</div>

		<div class="col-6">
			<LxMultiSelect
				v-model="statusSelecionado"
				label="Exemplo MultiSelect (valores)"
				:options="status"
			/>
		</div>
	</div>
</template>

Variações

Variação	Descrição
MultiSelect	Permite o usuário pesquisar e selecionar uma opção ou mais em uma lista.
ComboBox	Permite o usuário pesquisar e selecionar uma opção em uma lista. Ele também permite o usuário criar uma nova opção
Select	Este componente permite que o usuário selecione uma opção dentre uma lista de valores disponíveis. Uma diferença significativa desse componente em relação aos demais é que sua aparência pode variar de acordo com o navegador e dispositivo utilizado.

Propriedades

Nome	Descrição	Tipo	Padrão
id	`⚠️ obr` Define o identificado único(id) que o input irá receber	`String`	-
disabled	Define se o campo está desabilitado
label	Define a label do input	`String`	-
placeholder	Define o placeholder (texto quando não se há nenhuma opção selecionada) do input	`String`	`"Selecione"`
error-text	Mensagem de erro quando o campo é inválido	`String`	-
help-text	Define uma mensagem abaixo do campo para fornecer uma ajuda adicional	`String`	-
options*	`⚠️ obr` Define quais serão as opções disponíveis para seleção. Quando for objetos, defina também as propriedades `track-by` e `options-label`	`Array`	-
options-key	Define qual a chave unica em uma lista de objetos	`String`	-
options-label	Define qual a propriedade do Objeto que será exibido no combo. Também pode ser passada uma `Function` em casos de label customizado (ex: :customLabel="({ id, descricao }) => ``${id} - ${descricao}`)	`String` `Function`	-

Playground

Exemplo MultiSelect (objetos)

options: [ { "Nome": "Vue.js", "Id": "vu" }, { "Nome": "Javascript", "Id": "js" }, { "Nome": "Open Source", "Id": "os" }, { "Nome": "CSS", "Id": "css" }, { "Nome": ".NET", "Id": "net" }, { "Nome": "HTML", "Id": "ht" } ]

modelValue:

Nome	Controle
disabled
label
error-text
help-text
placeholder

Clique para exibir o código

vue

<script setup>
import { ref } from 'vue'
import { LxMultiSelect } from '@/index';

const objSelecionado = ref();
const tecnologias = ref([
	{ Nome: 'Vue.js', Id: 'vu' },
	{ Nome: 'Javascript', Id: 'js' },
	{ Nome: 'Open Source', Id: 'os' },
	{ Nome: 'CSS', Id: 'css' },
	{ Nome: '.NET', Id: 'net' },
	{ Nome: 'HTML', Id: 'ht' }
]);

const disabled = ref(false);
const errorText = ref("");
const helpText = ref("");
const createNew = ref("");
const placeholder = ref("Selecione");
const label = ref("Combo exemplo");
</script>

<template>
	<div class="row">
		<div class="col-12">
			<LxMultiSelect
				v-model="objSelecionado"
				label="Exemplo MultiSelect (objetos)"
				:options="tecnologias"
				:options-label="({ Nome, Id }) => `${Nome} (Cód: ${Id})`"
				options-key="Id"
				:error-text="errorText"
				:help-text="helpText"
				:placeholder="placeholder"
				:disabled="disabled"
			/>
		</div>
	</div>

	<div class="row">		
		<div class="col-12">
			<strong>options: </strong>
			<small>{{ tecnologias }}</small>
		</div>
	</div>

	<div class="row">		
		<div class="col-12">
			<strong>modelValue: </strong>
			<small>{{ objSelecionado }}</small>
		</div>
	</div>

		<!-- playground controls -->
	<table style="max-height:50vh;">
		<thead>
			<tr>
				<th style="width: 140px;">Nome</th>
				<th class="">Controle</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<label class="form-label m-0"> disabled </label>
				</td>
				<td>
					<input v-model="disabled" class="form-check-input" type="checkbox">
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">label</label>
				</td>
				<td>
					<input v-model="label" type="text" class="form-control">
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">error-text</label>
				</td>
				<td>
					<input v-model="errorText" type="text" class="form-control">
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">help-text</label>
				</td>
				<td>
					<input v-model="helpText" type="text" class="form-control">
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">placeholder</label>
				</td>
				<td>
					<input v-model="placeholder" type="text" class="form-control">
				</td>
			</tr>
		</tbody>
	</table>
</template>

<script setup>
import { ref } from 'vue'
import { LxMultiSelect } from '@/index';

const objSelecionado = ref();
const tecnologias = ref([
	{ Nome: 'Vue.js', Id: 'vu' },
	{ Nome: 'Javascript', Id: 'js' },
	{ Nome: 'Open Source', Id: 'os' },
	{ Nome: 'CSS', Id: 'css' },
	{ Nome: '.NET', Id: 'net' },
	{ Nome: 'HTML', Id: 'ht' }
]);

const disabled = ref(false);
const errorText = ref("");
const helpText = ref("");
const createNew = ref("");
const placeholder = ref("Selecione");
const label = ref("Combo exemplo");
</script>

<template>
	<div class="row">
		<div class="col-12">
			<LxMultiSelect
				v-model="objSelecionado"
				label="Exemplo MultiSelect (objetos)"
				:options="tecnologias"
				:options-label="({ Nome, Id }) => `${Nome} (Cód: ${Id})`"
				options-key="Id"
				:error-text="errorText"
				:help-text="helpText"
				:placeholder="placeholder"
				:disabled="disabled"
			/>
		</div>
	</div>

	<div class="row">		
		<div class="col-12">
			<strong>options: </strong>
			<small>{{ tecnologias }}</small>
		</div>
	</div>

	<div class="row">		
		<div class="col-12">
			<strong>modelValue: </strong>
			<small>{{ objSelecionado }}</small>
		</div>
	</div>

		<!-- playground controls -->
	<table style="max-height:50vh;">
		<thead>
			<tr>
				<th style="width: 140px;">Nome</th>
				<th class="">Controle</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<label class="form-label m-0"> disabled </label>
				</td>
				<td>
					<input v-model="disabled" class="form-check-input" type="checkbox">
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">label</label>
				</td>
				<td>
					<input v-model="label" type="text" class="form-control">
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">error-text</label>
				</td>
				<td>
					<input v-model="errorText" type="text" class="form-control">
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">help-text</label>
				</td>
				<td>
					<input v-model="helpText" type="text" class="form-control">
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">placeholder</label>
				</td>
				<td>
					<input v-model="placeholder" type="text" class="form-control">
				</td>
			</tr>
		</tbody>
	</table>
</template>

MultiSelect ​

Visão geral ​

Variações ​

Propriedades ​

Playground ​

MultiSelect

Visão geral

Variações

Propriedades

Playground