Slash Command With Arguments

ProNew

A command line in a message box: typing / lists commands, choosing one shows its usage, the arguments are parsed and previewed as you type, and Enter runs it only when they are valid. Use this when commands take parameters, like /remind 10m call Ada.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

value

defaultValue

Guide and examples

When to use it

Use it in chat and issue trackers with commands such as /remind, /assign and /snooze, where a typo in an argument should be explained before anything runs.

Do not use it when commands take no arguments. Use a slash menu that inserts text.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`commands`	`{ name, usage, description, parse, preview? }[]`	-	`parse(args)` returns `{ ok: true, value }` or `{ ok: false, error }`; `preview(value)` describes what will happen.
`onRun`	`(command, value, rawArgs) => void`	-	Runs when a valid command is submitted.
`onSend`	`(text: string) => void`	-	Runs for text that is not a command.
`value`	`string`	-	The text (controlled).
`defaultValue`	`string`	`""`	Initial text.
`onValueChange`	`(value: string) => void`	-	Runs on every change.

Accessibility

While only the command name is typed a listbox of commands is shown (the input is a combobox); afterwards the usage line Usage: /remind <when> <message> is shown instead.
The preview (Will remind you in 10 minutes: call Ada) or the error is a polite role="status" and is linked to the input with aria-describedby.
aria-invalid is set while the arguments do not parse.
Enter never runs a command with invalid arguments; it announces the error.

Testing

The pattern ships with a Testing Library test (slash-command-with-arguments.test.tsx) that covers listing commands, usage and preview, blocking invalid arguments and running a valid command.

Guide and examples

When to use it

Use it in chat and issue trackers with commands such as /remind, /assign and /snooze, where a typo in an argument should be explained before anything runs.

Do not use it when commands take no arguments. Use a slash menu that inserts text.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`commands`	`{ name, usage, description, parse, preview? }[]`	-	`parse(args)` returns `{ ok: true, value }` or `{ ok: false, error }`; `preview(value)` describes what will happen.
`onRun`	`(command, value, rawArgs) => void`	-	Runs when a valid command is submitted.
`onSend`	`(text: string) => void`	-	Runs for text that is not a command.
`value`	`string`	-	The text (controlled).
`defaultValue`	`string`	`""`	Initial text.
`onValueChange`	`(value: string) => void`	-	Runs on every change.

Accessibility

While only the command name is typed a listbox of commands is shown (the input is a combobox); afterwards the usage line Usage: /remind <when> <message> is shown instead.
The preview (Will remind you in 10 minutes: call Ada) or the error is a polite role="status" and is linked to the input with aria-describedby.
aria-invalid is set while the arguments do not parse.
Enter never runs a command with invalid arguments; it announces the error.

Testing

The pattern ships with a Testing Library test (slash-command-with-arguments.test.tsx) that covers listing commands, usage and preview, blocking invalid arguments and running a valid command.