KQ-752 · SLASH/MENU

Slash Menu

Type a slash; the commands rise. A leading slash in the input opens a list anchored above the caret — the input's offset inside the composer, measured so chips pushing the input along move the anchor with it and clamped so the list never overhangs the edge — rising from eight pixels below on snap with one crisp overshoot. Arrow keys move a single layoutId pill between rows on snap, Enter turns the active command into a chip that scales in on snap while the slash text clears, Escape closes and Backspace in an empty field removes the last chip. A combobox with options and a status line that announces inserts and removals on settle, never the filtering.

KQ-752 · SLASH/MENU

What changed in the sync fix?

Gaugeworks Reasoner

The sync fix ships in 4.2. Crews in the field now see a queued badge while a report waits for signal, and the retry runs on a backoff of 2, 8 and 30 seconds instead of every minute, so a dead spot no longer drains the battery. The desk app is unchanged; the only visible difference there is a last-synced time under each report.

No chips · type / for commands

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/slash-menu

Props

commands: SlashCommand[]; default —; { id, label, hint? } offered after a leading slash; the hint prints as a mono aside.
chips / defaultChips: string[]; default []; Controlled or initial inserted command ids.
onChipsChange: (ids: string[]) => void; default —; Fires from an insert or a removal.
value / defaultValue: string; default ""; Controlled or initial input text.
onValueChange: (value: string) => void; default —; Fires from every edit.
onInsert: (command: SlashCommand) => void; default —; Fires from Enter or a click on an option.
onRemove: (command: SlashCommand) => void; default —; Fires from a chip's remove button or Backspace in an empty field.
placeholder: string; default "Type / for commands"; Placeholder while the input is empty and no chip is inserted.
label: string; default —; Names the combobox.
ref: React.Ref<HTMLInputElement>; default —; The text input, so a parent can focus it.

Prop	Type	Default	Description
commands	SlashCommand[]	—	{ id, label, hint? } offered after a leading slash; the hint prints as a mono aside.
chips / defaultChips	string[]	[]	Controlled or initial inserted command ids.
onChipsChange	(ids: string[]) => void	—	Fires from an insert or a removal.
value / defaultValue	string	""	Controlled or initial input text.
onValueChange	(value: string) => void	—	Fires from every edit.
onInsert	(command: SlashCommand) => void	—	Fires from Enter or a click on an option.
onRemove	(command: SlashCommand) => void	—	Fires from a chip's remove button or Backspace in an empty field.
placeholder	string	"Type / for commands"	Placeholder while the input is empty and no chip is inserted.
label	string	—	Names the combobox.
ref	React.Ref<HTMLInputElement>	—	The text input, so a parent can focus it.