Form Combobox

Combobox connected to Form context with server validation errors.

Installation

bash

pnpm dlx shadcn@latest add @cs/form-combobox

Usage

tsx

import { FormCombobox } from "@/components/cs/form-combobox"

tsx

<FormCombobox name="country" />

API Reference

FormCombobox

Combobox connected to Form context with server validation errors and pending-state handling.

Props

Name	Type	Default	Description
align	"center" \| "end" \| "start" \| undefined	-	Horizontal alignment of the options popover.
className	string \| undefined	-	Additional classes applied to the field wrapper and trigger button.
comboboxClassName	string \| undefined	-	Additional classes applied to the popup search input.
defaultValue	TValue \| TValue[] \| undefined	-	Initial selected value for uncontrolled usage. Initial selected values for uncontrolled usage.
disabled	boolean \| undefined	-	Prevents selection and text input.
error	string \| null \| undefined	-	Validation error message for the field.
fetchOptions	any	-	Remote option endpoint configuration.
id	string \| undefined	-	DOM id assigned to the combobox input.
label	ReactNode	-	Label displayed above the combobox.
multiple	boolean \| undefined	-	Enables multi-selection.
name *	string	-	Form field name used for submission and validation errors.
onNumber	((value: number \| null) => void) \| ((value: number[]) => void) \| undefined	-	Called when a numeric option is selected or cleared. Called when numeric options are selected.
onString	((value: string \| null) => void) \| ((value: string[]) => void) \| undefined	-	Called when a string option is selected or cleared. Called when string options are selected.
options	ComboboxOption<TValue>[] \| undefined	-	Static options displayed in the menu.
required	boolean \| undefined	-	Requires a value before the form can submit.
searchOnly	boolean \| undefined	-	Shows search results without retaining a selected value.
title	string \| undefined	-	Accessible title for the combobox input.
translations *	{ empty?: string; placeholder: string; nothingFound: string; optionsKey?: string; }	-	Text used for the empty selection, input placeholder, and empty result state.
value	TValue \| TValue[] \| undefined	-	Controlled selected value. Controlled selected values.

Dependencies

@cs/combobox @cs/form @cs/form-validation