Combobox

Formulário

Uma ou várias escolhas numa lista longa, com busca que ignora acento. Setas e Enter funcionam a partir da busca.

Substitui no Brain:SearchableSelectSearchableMultiSelectSearchableComboboxSuspensa

Escolha com busca

"use client";

import { Combobox, FormField } from "@paytime/ui";
import { useState } from "react";

const AREAS = [
  { value: "comercial", label: "Comercial" },
  { value: "financeiro", label: "Financeiro" },
  { value: "operacoes", label: "Operações" },
  { value: "tecnologia", label: "Tecnologia" },
  { value: "pessoas", label: "Pessoas" },
];

export default function Example() {
  const [area, setArea] = useState<string>();
  return (
    <FormField label="Área" className="max-w-xs">
      <Combobox value={area} onValueChange={setArea} options={AREAS} />
    </FormField>
  );
}

Várias escolhas

"use client";

import { FormField, MultiCombobox } from "@paytime/ui";
import { useState } from "react";

const AREAS = [
  { value: "comercial", label: "Comercial" },
  { value: "financeiro", label: "Financeiro" },
  { value: "operacoes", label: "Operações" },
  { value: "tecnologia", label: "Tecnologia" },
  { value: "pessoas", label: "Pessoas" },
];

export default function Example() {
  const [areas, setAreas] = useState<string[]>([]);
  return (
    <FormField label="Áreas" className="max-w-xs">
      <MultiCombobox values={areas} onValuesChange={setAreas} options={AREAS} />
    </FormField>
  );
}