Componente

CmCombobox

Seleção pesquisável com lista filtrável.

Import

Caminho público recomendado para este componente.

import { CmCombobox, CmForm, CmGrid, CmGridContainer, CmInput, CmText, type CmComboboxItem } from "cosmemilton-ui";

items é CmComboboxItem[] no formato { value, label, description?, keywords?, disabled? }.

Use onChange para receber o item completo selecionado ou null quando o usuário limpar.

Use value para controlar a seleção por value; initialValue só define o valor inicial não controlado.

onSearch recebe o termo digitado com debounce interno de 300 ms.

onSearch apenas notifica o termo; a filtragem local continua usando items.

dropdownSizing aceita "input" para acompanhar a largura do campo ou "content" para ajustar ao conteúdo.

Passe name quando o valor selecionado precisa ser enviado por formulário nativo.

description e keywords melhoram a busca sem poluir o label exibido.

selectedDisplay="label" mantém o campo compacto após a seleção.

Use CmGridContainer e CmGrid para alinhar Combobox com outros campos sem depender de CSS externo.

Responsável

Uso controlado para escolher uma pessoa, receber o item completo e observar o termo enviado ao callback de busca.

Pesquise por nome ou área.

Última busca enviada ao callback: nenhuma

Produto em pedido

Combobox como campo de produto, com valor inicial, hidden input por name e resumo do item escolhido.

SKU MAT-126 · R$ 345,00

Item selecionado

Material didático 2026

Pronto

Partes de um formulário

Cliente, produto e responsável interno trabalhando juntos em um fluxo de pedido.

Novo pedido

Exemplo de campos combinando busca, seleção e resumo antes de salvar.

Pesquise por responsável ou aluno.

Aceita busca por SKU, nome ou categoria.

Resumo

Ana Paula Martins · Kit uniforme escolar · João Lima

Erro, vazio e bloqueado

Estados comuns de formulário: obrigatório com erro, mensagem vazia e campo desabilitado.

Selecione um produto para continuar.

Campo travado quando o pedido já foi faturado.