Combobox
A combobox component combining input field with dropdown menu for filtering and selecting options
Installation
Terminal
Import
Component.tsx
Basic
Basic: The simplest usage of Combobox.
Features:
- Searchable input with filtering
- Type to filter the list
- Use arrow keys to navigate
- Press Enter or click to select
- Selected value appears in the input
- Multiple trigger types (click, focus, input)
Disabled
Disabled: Demonstrates disabled Combobox functionality.
Features:
- Input and interactions are disabled
- Visual feedback for unavailable state
- Selected value remains visible
- Useful for conditional availability
Large Size
LargeSize: Demonstrates Combobox with large size variant.
Features:
- Increased padding and font size
- Large trigger and menu items
- Better for touch interfaces
- Consistent sizing across components
Light Variant
LightVariant: Demonstrates Combobox with light variant styling.
Features:
- Light variant visual style
- Standard search and selection functionality
- Multiple trigger types support
- Consistent with light theme
Long List
LongList: Demonstrates Combobox with many options and scrolling behavior.
Features:
- Long list of options (100 items)
- Efficient filtering
- Scroll behavior in dropdown
- Empty state when no matches found
- Performance optimization for large lists
Use cases:
- City/region selectors
- Long option lists
- Large dataset selection
Clearable
Clearable: Demonstrates Combobox with clearable input.
Features:
- Shows clear button when value is not empty
- Clear button is hidden when value is empty
- Quick value reset functionality
- Better user experience for search scenarios
Custom Width
CustomWidth: Demonstrates Combobox with custom width that doesn't match trigger.
Features:
- Dropdown width independent of trigger
- Custom width via className
- Flexible layout options
- Useful for compact triggers with wider options
Use cases:
- Space-constrained layouts
- Wide option content
- Custom design requirements
Controlled
Controlled: Demonstrates controlled Combobox with external state management.
Features:
- Value is controlled by parent component
- Separate search value and selected value
- Demonstrates integration with forms
- External state synchronization
Use cases:
- Form integration
- Complex state management
- Multi-step workflows
Selected fruit: Apple
Search value: (empty)
Coordinate Mode
CoordinateMode: Demonstrates Combobox in coordinate mode positioned at specific coordinates.
Features:
- No trigger element required
- Positioned at specific x/y coordinates
- Auto-selection support
- Perfect for mentions and autocomplete
- User search and filtering
Use cases:
- Context menus at cursor position
- Mention dropdowns in editors
- Custom positioned autocomplete
- Rich text editor integrations
📍 Coordinate Mode Combobox
Click anywhere in the area below to trigger a Combobox at that position. Perfect for mentions, autocomplete, etc.
Click anywhere in this area to show Combobox at mouse position
Query: “”
Position: null
Open: No
Results: 3
Mentions With Slate
MentionsWithSlate: Demonstrates Combobox integrated with Slate.js rich text editor for mentions.
Features:
- Type @ to trigger mentions menu
- Combobox positioned at cursor location
- Integration with Slate.js editor
- User selection and insertion
- Real-time text updates
- Keyboard navigation support
- Filtering based on @ query
Use cases:
- Rich text editors with mentions
- Comment systems
- Collaborative editing features
- Social media style inputs
🔍 Combobox Mentions with Slate.js
Type @ and continue typing to filter users. Combobox maintains focus on the editor.
Current text: “”
Mention query: “”
Filtered users: 0 / 100
Menu open: No
Position: null
Should show menu: No
Test Cases:
- • Type @ - Shows all 5 users
- • Type @john - Filters to John Doe, Alice Johnson
- • Type @dev - Filters to developers
- • Type @engineer - Filters to engineers
- • Type @xyz - Shows “No users found”
- • Add space after selection - Closes menu
Empty
Empty: Demonstrates empty state display when no results match.
Features:
- Show custom empty message when no options match the search
- Useful for filtered results scenarios
API reference
| Combobox | Type | Default |
|---|---|---|
autoSelection | boolean |undefined | true |
disabled | boolean |undefined | - |
focusManagerProps | Partial<Omit<FloatingFocusManagerProps, "children" |"context">> |undefined | { returnFocus: true, modal: false } |
matchTriggerWidth | boolean |undefined | true |
onBlur | ((value: string) => void) |undefined | - |
onChange | ((value: string) => void) |undefined | - |
onOpenChange | ((open: boolean, trigger?: "input" |"click" |"focus" |undefined) => void) |undefined | - |
open | boolean |undefined | - |
placement | undefined |"top" |"right" |"bottom" |"left" |"top-start" |"top-end" |"right-start" |"right-end" |"bottom-start" |"bottom-end" |"left-start" |"left-end" | "bottom-start" |
portalId | string |undefined | - |
position | { x: number; y: number; } |null |undefined | - |
readOnly | boolean |undefined | - |
root | HTMLElement |null |undefined | - |
trigger | undefined |"input" |"coordinate" | "input" |
value | string |undefined | - |
variant | undefined |"default" |"light" |"reset" | "default" |
| ComboboxTrigger | Type | Default |
size | undefined |"default" |"large" | - |
onChange | ((value: string) => void) |undefined | - |
disabled | boolean |undefined | - |
placeholder | string |undefined | - |
value | string |undefined | - |
onClick | (() => void) |undefined | - |
active | boolean |undefined | - |
i18n | { clear: string; placeholder: string; } |undefined | - |
noMatch | boolean |undefined | - |
prefixElement | ReactNode | - |
showClear | boolean |undefined | - |
suffixElement | ReactNode | - |
variant | undefined |"default" |"dark" |"reset" | - |
ref | ((instance: HTMLInputElement |null) => void) |RefObject<HTMLInputElement> |null |undefined | - |