ComboBox

O ComboBox é um componente que permite ao usuário selecionar múltiplas opções filtráveis e opcionalmente, adicionar novas opções.

---

Quando usar:

• Quando o usuário pode selecionar múltiplos itens a partir de uma lista.
• Quando as opções disponíveis podem não contemplar todos os casos, permitindo que o usuário adicione novas.
• Quando a lista de opções é extensa e se beneficia de um campo de busca.
• Em formulários onde se deseja flexibilidade e agilidade na entrada de dados.

Quando não usar:

• Se não for permitido adicionar novos itens à lista.
• Quando o conjunto de opções é fixo e necessário selecionar mais de um item, considere usar o Multiselect.
• Se for necessário selecionar apenas um item, prefira o Select.

---

Uso

<CdsComboBox
	v-model="value"
	label="Séries"
	variant="green"
	optionsKeyField="name"
	optionsValueField="value"
	:options="[
		{
			value: 'Breaking Bad',
			name: 'breaking-bad',
		},
		{
			value: 'Game of Thrones',
			name: 'game-of-thrones',
		},
	]"
	required
/>

---

Preview

Séries

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
label	string	'Label'	--	Especifica o título do select.
* options (required)	array	[]	--	Array de objetos que especifica a lista de opções do select. Os valores a serem mostrado como opções do select devem estar atribuídos a chave `value` do objeto.
required	boolean	false	--	Controla a exibição do asterísco indicativo de campo obrigatório.
fluid	boolean	false	--	Especifica se a largura do select deve ser fluida.
disabled	boolean	false	--	Especifica o status de interação do select.
* optionsKeyField (required)	string	'name'	--	Indica o nome da chave do objeto a ser considerada na renderização das opções do select.
* optionsValueField (required)	string	'value'	--	Indicar o nome do valor do objeto a ser considerado na renderização
state	string	'default'	default valid invalid loading	Especifica o estado do input. As opções são 'default', 'valid', 'loading' e 'invalid'.
errorMessage	string	'Valor inválido'	--	Especifica a mensagem de erro, que será exibida caso o estado seja inválido
tooltip	string	null	--	Define exibição e texto do tooltip do input
tooltipIcon	string	'info-outline'	--	Especifica ícone do tooltip do TextInput.
variant	string	'green'	green teal blue indigo violet pink red orange amber dark	A variante de cor. São 10 variantes:

Eventos

Nome	Descrição
@update:modelValue