Name: Default File
Availability: InStock
Author: Vignesh V

Installation

Install with the CLI, or copy the component source into your project.

Add combobox (npm)

1
npx --yes -p github:itsvigneshv/default-file-ui#main df-ui add combobox

Properties

Filterable text field backed by Option List. Supports static options, async loading, clear, and optional custom values.

Prop	Type	Default	Notes
value	string	-	Controlled committed option value. The input shows the matching label; typing uses a separate query string.
defaultValue	string	-	Uncontrolled initial option value.
onValueChange	(value: string) => void	-	Called with the option value when a selection is committed, or with custom text when allowCustomValue is set.
options	readonly ComboboxOption[]	-	Static options to filter.
loadOptions	(query: string) => Promise<ComboboxOption[]>	-	Async option loader for the current query.
allowCustomValue	boolean	-	Allow committing text that is not in the option list.
clearable	boolean	true	Show a clear control when the field has text.
placeholder	string	-	Input placeholder.
disabled	boolean	-	Disable the field.
invalid	boolean	-	Mark the field invalid for styling and aria-invalid.
open	boolean	-	Controlled list open state.
defaultOpen	boolean	-	Uncontrolled initial open state.
onOpenChange	(open: boolean) => void	-	Called when the list open state changes.
debounceMs	number	-	Debounce for async loadOptions.
id	string	-	Id on the text input.
emptyContent	ReactNode	-	Content when the filtered list is empty.
itemChrome	ListItemChromeProps	-	Default List Item chrome for every option row.
aria-label	string	-	Accessible name when no aria-labelledby is set.
aria-labelledby	string	-	Id of an external label. When set, aria-label is omitted so the external name wins.
className	string	-	Additional styles on the root.