API Reference
Complete API documentation for components, utilities, and framework core
ListBox
Dropdown selector with mobile bottom sheet and desktop positioning
🔧 Props
| Property | Type | Default | Description |
|---|---|---|---|
| options* | Array | - | Array of strings or {value, text, displayText} objects |
| value | State|string | undefined | Selected value (reactive state) |
| placeholder | string | 'Select...' | Placeholder when no selection |
| label | string | undefined | Label text above trigger |
| class | string | - | Trigger button classes |
| onchange | function | undefined | Change handler |
✨ Features
Dual component return: {Listbox, ListboxList}
Native Popover API with smooth animations
Mobile bottom sheet, desktop positioned dropdown
Full keyboard navigation
Special Input integration for country codes
💻 Examples
Country Selector
javascript•Country Selector
const country = van.state('US');
const { Listbox, ListboxList } = ListBox({
options: ['US', 'UK', 'CA'],
value: country,
onchange: e => country.val = e.target.value
});
return div(Listbox(), ListboxList());▶️ Live Preview
💡 Click "Edit Code" to modify the example
🔄 Click "Apply Changes" to see your modifications
↩️ Click "Reset" to restore original code
💡 Usage Tips
🔗 Related
Explore vwf
Discover what vwf can do