A single-value combobox with grouped options, search, keyboard cursor, clear, and optional create-from-query.
OpenGroupedSearchableCreatableDisabled
<Select options={regions} bind:value placeholder="Pick a region" clearable />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Select } from '@chanrg/4ui';<Select options={regions} bind:value placeholder="Pick a region" clearable />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | SelectOption[] | [] | value, label, optional group and disabled. |
value | string | null ($bindable) | null | Selected value. |
searchable | boolean | auto | Search input; auto-enables past 7 options. |
clearable | boolean | false | Clear affordance. |
allowCreate | boolean | false | Offer “Create …” for unmatched queries (with oncreate). |
onchange | (value, option?) => void | — | Selection callback. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Combobox/listbox pattern with aria-expanded and aria-selected.
- Arrow keys move the cursor, Enter selects, Escape closes and restores focus.