CommandInput

A plain text input that also handles slash-style commands: typing the trigger character (/ by default) opens a filtered, keyboard-navigable command menu; typing anything else behaves like a normal text field.

Installation

npx dafink-ui add command-input

Demo

Props

Name	Type	Default	Description
value	string	-	Controlled input value.
onChange	(value: string) => void	-	Called on every text change, including internal completions/clears.
commands	CommandOption[]	-	Array of { name, description?, icon? } objects available for autocomplete.
onCommand	(command: CommandOption) => void	-	Called when a command is executed (Enter or pointer-select on a menu item).
trigger	string	'/'	Character that opens the command menu when it is the first character typed.
menuSide	'top' \| 'bottom'	'top'	Which side of the input the menu opens on.
className	string	''	Additional classes on the root wrapper element.

Accessibility

CommandInput is a non-modal combobox, not a dialog: focus never leaves the text input. Opening the menu doesn't move focus anywhere — the active match is tracked virtually via aria-activedescendant on the role="combobox" input, which also carries aria-expanded and aria-controls pointing at the role="listbox" menu. There is no focus trap.

Key	Function
`down arrow`	Moves to the next matching command, wrapping from the last to the first.
`up arrow`	Moves to the previous matching command, wrapping from the first to the last.
`home`	Jumps to the first matching command.
`end`	Jumps to the last matching command.
`tab`	Completes the active command's full name into the input and keeps the menu open, without running it; when nothing is active, Tab behaves natively and closes the menu.
`enter`	Runs the active command: calls onCommand, clears the input, and closes the menu.
`escape`	Closes the menu; focus stays in the input.