Skip to content
Pinky UI

forms

Inline Command Field

Slash commands selected inside a composer become explicit structured tokens instead of navigating away.

  • forms
  • command
  • composition
  • tokens
  • slash
Related pattern

Commands embedded in authored content; it deliberately does not replace Command Palette.

Live preview

Commands become visible tokens inside the composition, separate from navigation commands.

Quick usage

usage
import { InlineCommandField } from "@pinky-ui/systems";

<InlineCommandField commands={commands} onTokensChange={setCommands} />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
commandsInlineCommand[]—Commands available for explicit insertion into the composition.
classNamestring—Styles the outer interaction surface.

Accessibility

  • The command list uses labelled options and active-descendant keyboard navigation.
  • Inserted commands are visible removable tokens; Escape dismisses the suggestion list without changing navigation.

Performance

  • The list mounts only while a slash command is being composed and inserted tokens remain lightweight.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Notes, messages and briefs that embed dates, people or statuses

When not to use

  • Global navigation/action launchers, which should use Command Palette

Skill

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

tsx
<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.

Open this skill on its own page