Option List Editor
Edits a choice field's options as rows — a hue, a name, remove, and add — holding no state of its own.
- Status
- Since
0.26.0- Accessibility pattern
- every control is labelled by its option; Enter commits
Last updated
Saved with 3 options.
Install
Configure registry credentials first using the Quickstart. Before copying this item or any transitive registry dependency, verify the signed manifest and save the exact bytes for Option List Editor before installation. Retain the digest printed by this command.
pnpm exec vegastack-design verify option-list-editorInstall with the pinned shadcn CLI. Bare shadcn does not verify VegaStack signature or integrity.
pnpm dlx shadcn@4.21.0 add @vegastack/option-list-editorRun the exact offline --post-write command printed by the preflight, using its saved item path and independently retained --expected-integrity digest. Use the saved preflight for every transitive registry dependency too; stop on any mismatch before using the components.
The same command installs the registry items it composes: @vegastack/button, @vegastack/chip, @vegastack/color-picker, @vegastack/dropdown-menu-form, @vegastack/input.
Usage
import { OptionListEditor } from "@/components/ui/option-list-editor";
<OptionListEditor options={options} onChange={setOptions} onCommit={save} />;The options are the host's: the editor draws them and reports edits. onChange follows every
keystroke, so the host can show the list as it is typed. onCommit says an edit is done — a name
left or confirmed with Enter, a hue picked, an option removed — which is when a host saves. An added
option is not committed until it is named.
Inside a menu, pass inMenu so typing in a name stays the field's own.
Scope
- No validation: duplicate or empty names are the host's to refuse.
- No reordering: an option's place in the list is its order, and the host decides how to move it.
Examples
Edit and save
Saved with 3 options.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
onChange* | (options: OptionListEditorOption[]) => void | — | The list after every edit, keystrokes included. |
onCommit* | (options: OptionListEditorOption[]) => void | — | The list when an edit is done: a name left (blur) or confirmed with Enter, a hue picked, an option removed. An added option is not committed until it is named. |
options* | readonly OptionListEditorOption[] | — | The options, in order. |
className | string | — | Extra classes for the root. |
createId | (() => string) | crypto.randomUUID | Make an id for an added option. |
inMenu | boolean | false | The editor sits inside a menu: typing in a name stays the field's own (the menu's arrow-key and type-ahead handling does not see it). |
labels | Partial<OptionListEditorLabels> | English | The words shown, in part or whole. |
maxLength | number | 200 | The most characters a name holds. |
Data attributes and CSS variables on OptionListEditor
| Attribute | Values |
|---|---|
data-slot | "option-list-editor" | "option-list-editor-row" |
Option
| Prop | Type | Default | Description |
|---|---|---|---|
id* | string | — | Stable id — what a value stores. |
label* | string | — | Its name. |
hue | ChipHue | undefined — neutral | One of the ten tag hues (HUE_COLORS in color-picker). |
Accessibility
- Each name field, hue picker and remove button carries a label that names its option; the words
come from
labelsand can be translated.
| Key | Action |
|---|---|
| Enter | In a name: commit it (never submits a form) |
| Tab | Move between name, hue and remove |
| Contract | States tested |
|---|---|
| Behaviour | default, empty, focused |
| Accessibility | labeled, browser-accessibility-test |
| Visual | default, hover |
Do / Don't
Dropdown Menu Form
The parts a dropdown menu needs to hold a small form — a text input that keeps its keys, a switch row with a hint, and a menu that opens at a point.
Filter Builder
The stateful nested and/or filter builder — host-injected field grammar, per-type value editors, depth and condition caps, FilterChip summary.