A multi-select input with chips, keyboard cursor, backspace-to-remove, selection limits, and async lookup hooks.
ChipsLimit reachedLoadingEmpty
ana@example.com
<Combobox options={people} bind:value maxSelected={4} placeholder="Invite teammates…" />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Combobox } from '@chanrg/4ui';<Combobox options={people} bind:value maxSelected={4} placeholder="Invite teammates…" />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | SelectOption[] | [] | Available options. |
value | string[] ($bindable) | [] | Selected values. |
maxSelected | number | — | Selection cap. |
onquery | (query) => void | — | Async lookups: fetch and update options yourself. |
loading | boolean | false | Async spinner row. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Chips expose labelled remove buttons.
- Backspace with an empty query removes the last chip.