SKILL.md
$27
<Combobox store={combobox} onOptionSubmit={handleSubmit}>
<Combobox.Target>
<InputBase
component="button"
pointer
rightSection={<Combobox.Chevron />}
onClick={() => combobox.toggleDropdown()}
>
{value || <Input.Placeholder>Pick value</Input.Placeholder>}
</InputBase>
</Combobox.Target>
<Combobox.Dropdown>
<Combobox.Options>
{options.map((item) => (
<Combobox.Option value={item} key={item}>{item}</Combobox.Option>
))}
</Combobox.Options>
</Combobox.Dropdown>
</Combobox>3. Handle submit
const handleSubmit = (val: string) => {
setValue(val);
combobox.closeDropdown();
};Target Types
Scenario
Use
Button trigger (no text input)
<Combobox.Target targetType="button">
Input trigger
<Combobox.Target> (default)
Pills + separate input (multi-select)
<Combobox.DropdownTarget> + <Combobox.EventsTarget>
References
- references/api.md — Full API:
useComboboxoptions and store, all sub-component props, CSS variables, Styles API selectors
- references/patterns.md — Code examples: searchable select, multi-select with pills, groups, custom rendering, clear button, form integration