cosmemilton-ui/clientFormularios

CmCombobox

Use quando a lista e grande demais para um select simples e o usuario precisa buscar por texto.

Import

tsx
import { CmCombobox } from "cosmemilton-ui/client";

Busca de cliente

Digite para filtrar por nome ou palavra-chave.

tsx
"use client";

import { useState } from "react";
import { CmCombobox, type CmComboboxItem } from "cosmemilton-ui/client";

const clients: CmComboboxItem[] = [
  { value: "acme", label: "Acme Ltda.", description: "CNPJ 00.000.000/0001-00" },
  { value: "aurora", label: "Aurora Foods", description: "Cliente premium" },
  { value: "nimbus", label: "Nimbus Tech", description: "Contrato anual" },
];

export default function Example() {
  const [value, setValue] = useState("acme");

  return (
    <CmCombobox
      label="Cliente"
      value={value}
      items={clients}
      placeholder="Buscar cliente"
      helperText="Digite para filtrar por nome ou palavra-chave."
      onChange={(item) => setValue(item?.value ?? "")}
    />
  );
}

API rapida

CmCombobox

itemsvalue/initialValueonChangelabelplaceholdererrordropdownSizing