Ravox KitForms
Combobox
A field that filters a list as the person types. Accent-insensitive search ("sao" finds São Paulo), single or multiple selection with tags, groups, empty state, loading for server-side search and "Create …" when nothing matches.
O frete é calculado a partir dela.
Settings
Toggles
Examples
Tags with a limit
BugUrgente
Até 3 por chamado.
Create a new category
Digite uma categoria que não existe, como “Canecas”.
Server-side search
Groups and a locked option
Installation
The command creates components/ui/combobox.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add comboboxProps
| Prop | Type | Default | Description |
|---|---|---|---|
| options | { value, label, description?, group?, keywords?, disabled? }[] | — | The list. `keywords` is included in the search (acronym, nickname); options with the same `group` appear together under a heading. |
| multiple | boolean | false | Several choices: they become tags inside the field, the list stays open and Backspace in the empty field removes the last one. |
| value / defaultValue | string | null (único) · string[] (múltiplo) | — | Controlled or initial value. |
| onValueChange | (value: string | null) => void · (values: string[]) => void | — | Called on each choice, depending on the mode. |
| onSearchChange | (text: string) => void | — | Called on each letter, to search on the server (debounce on your side). With it, the list is not filtered here. |
| shouldFilter | boolean | true sem onSearchChange | Filters the list by the typed text. |
| loading | boolean | false | Shows "Searching…" and the spinner, and sets aria-busy on the list. |
| empty | ReactNode | "Nada encontrado para “…”." | What appears when nothing matches. |
| onCreate | (text: string) => string | void | — | Turns on the "Create “text”" option. Return the new value so it comes out already selected. |
| max | number | — | With multiple: the maximum number of choices; the other options are locked. |
| label · hint · error | ReactNode | — | Label, help and error linked to the field (aria-describedby, aria-invalid). |
| size | "sm" | "md" | "lg" | "md" | Minimum height: 32, 40 or 48px (the box grows with the tags). |
| onBlur | () => void | — | Focus left the field (the Controller's onBlur). |
| name | string | — | Sends the value in <input type="hidden"> (one per choice in multiple). |
| ...props | ComponentProps<"input"> | — | Go to the <input> (placeholder, disabled, ref…). className goes on the box; wrapperClassName and listClassName on the other levels. |