ObjectUIComponentsForm
Combobox
Searchable dropdown for selecting from a list of options
The Combobox component combines a text input with a dropdown list, allowing users to search and select from options.
Basic Usage
Basic Combobox
{
"type": "combobox",
"placeholder": "Select framework...",
"options": [
{
"value": "next",
"label": "Next.js"
},
{
"value": "react",
"label": "React"
},
{
"value": "vue",
"label": "Vue"
},
{
"value": "angular",
"label": "Angular"
}
]
}With Search
Searchable Combobox
{
"type": "combobox",
"placeholder": "Select language...",
"searchPlaceholder": "Search languages...",
"emptyText": "No language found.",
"options": [
{
"value": "js",
"label": "JavaScript"
},
{
"value": "ts",
"label": "TypeScript"
},
{
"value": "py",
"label": "Python"
},
{
"value": "go",
"label": "Go"
},
{
"value": "rust",
"label": "Rust"
},
{
"value": "java",
"label": "Java"
}
]
}States
Disabled
{
"type": "combobox",
"placeholder": "Disabled combobox",
"disabled": true,
"options": [
{
"value": "1",
"label": "Option 1"
}
]
}With Value
{
"type": "combobox",
"placeholder": "Select option...",
"value": "2",
"options": [
{
"value": "1",
"label": "Option 1"
},
{
"value": "2",
"label": "Option 2"
},
{
"value": "3",
"label": "Option 3"
}
]
}Schema
interface ComboboxOption {
value: string;
label: string;
}
interface ComboboxSchema {
type: 'combobox';
options: ComboboxOption[]; // Available options
value?: string; // Selected value
// Text
placeholder?: string; // Button placeholder
searchPlaceholder?: string; // Search input placeholder
emptyText?: string; // Text when no results
// Events
onValueChange?: string | ActionConfig;
// States
disabled?: boolean;
// Styling
className?: string;
}Examples
Dynamic Options
Country Selector
{
"type": "combobox",
"placeholder": "Select country...",
"searchPlaceholder": "Search countries...",
"options": [
{
"value": "us",
"label": "United States"
},
{
"value": "uk",
"label": "United Kingdom"
},
{
"value": "ca",
"label": "Canada"
},
{
"value": "au",
"label": "Australia"
},
{
"value": "de",
"label": "Germany"
},
{
"value": "fr",
"label": "France"
}
]
}