EntityCombobox
Combobox genérico com busca assíncrona para entidades.
Instalação
npx @kobana/ui add entity-comboboxDependências shadcn/ui: popover, command, button
Importação
import { EntityCombobox } from "@/components/kobana/entity-combobox"Props
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
value | string | — | Valor selecionado |
onChange | (value: string, entity?: T) => void | — | Callback com valor e entidade |
onSearch | (query: string) => Promise<T[]> | — | Busca async (debounce 300ms) |
renderItem | (item: T) => ReactNode | — | Renderização de cada item |
renderSelected | (item: T) => ReactNode | — | Renderização do item selecionado |
getItemValue | (item: T) => string | — | Extrai valor do item |
getItemLabel | (item: T) => string | — | Extrai label do item |
placeholder | string | "Selecionar..." | Placeholder |
searchPlaceholder | string | "Buscar..." | Placeholder da busca |
emptyMessage | string | "Nenhum resultado encontrado." | Mensagem vazio |
disabled | boolean | — | Desabilitado |
className | string | — | Classes adicionais |
Uso
<EntityCombobox<Customer>
value={customerId}
onChange={(value, customer) => setCustomerId(value)}
onSearch={async (query) => {
const res = await api.customers.search({ query })
return res.data
}}
renderItem={(c) => (
<div>
<p className="font-medium">{c.name}</p>
<p className="text-xs text-muted-foreground">{c.email}</p>
</div>
)}
getItemValue={(c) => c.id}
getItemLabel={(c) => c.name}
/>