Choice3 checks
FormCombobox
Searchable list, with remote search and new entries.
Example
Installation
bunx --bun shadcn@latest add @fieldkit/form-comboboxNeeds the @fieldkit registry. Add it once
Usage
- 1
Add the field to your schema
schema.tsimport { z } from "zod"import { choiceField } from "@/lib/field-schemas" export const schema = z.object({ city: choiceField("Choose a city"),}) - 2
Render it inside a Form
The name prop matches the schema key.
example-form.tsximport { Form } from "@/components/form/form"import { FormCombobox } from "@/components/form/form-combobox"import { FormSubmit } from "@/components/form/form-submit"import { FieldGroup } from "@/components/ui/field"import { schema } from "./schema" export function ExampleForm() { return ( <Form schema={schema} defaultValues={{ city: "" }} onSubmit={save} > <FieldGroup> <FormCombobox name="city" loadOptions={searchCities} creatable /> <FormSubmit>Save</FormSubmit> </FieldGroup> </Form> )}
Checks
CheckOptionError message
Remote search
loadOptionsDebounced 300 msCreate new
creatableNoneVirtualized list
auto above 100NoneLong lists
Local options filter as you type.
Best practices
- Ignore results from older searches
Try these values
Terminal
choiceField("Choose a city")| Input | Result | Output |
|---|---|---|
"Nairobi" | Valid | "Nairobi" |
"" | Invalid | Choose a city |
API reference
FormCombobox
PropDescription
optionsArray<{ value, label, keywords?, hint?, disabled? }>The choices.loadOptions(query) => Promise<Array<Option>>Remote search, debounced 300 ms.creatablebooleanOffers to add what was typed.Field frame
PropDescription
namestringKey in the schema. Also picks the preset label and autocomplete.labelReact.ReactNodeOverrides the preset label. Pass null to hide it.descriptionReact.ReactNodeHint under the control.requiredbooleanOverrides the asterisk read from the schema.fieldPropsFormFieldPropsProps for the wrapping Field, such as className.