Inline Command Field
Use Inline Command Field when authored content can contain structured commands such as dates, people or statuses without leaving the composition surface.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Commands become visible tokens inside the composition, separate from navigation commands.
Purpose
Use Inline Command Field when authored content can contain structured commands such as dates, people or statuses without leaving the composition surface.
Interaction
Typing / opens a local command list. Choosing a command inserts an explicit removable token and returns focus to the field. This is content composition, not global navigation.
Usage
<InlineCommandField label="Brief" commands={commands} onTokensChange={setTokens} />Accessibility
Use a labelled combobox/listbox relationship for the command list. Inserted commands need visible names and individual remove buttons; Escape must dismiss suggestions without navigating.
Reduced motion
Open the command list and insert the token directly. The distinction between raw text, suggestion and inserted command must remain visible.
Source: packages/skills/forms/inline-command-field.md