Overlays

CommandMenu

Inline caret-anchored slash-command list for textareas and single-line text inputs.

import { CommandMenu } from '@lostgradient/cinder/command-menu';
overlaycommand
01

Overview

Inline caret-anchored slash-command list for textareas and single-line text inputs.

Usage

svelte 
<script lang="ts">
  import { CommandMenu } from '@lostgradient/cinder/command-menu';
</script>

Guidance

Use When

  • Showing a contextual command list at the caret while a user types in a textarea or input.
  • Building slash-command insertion flows where the host owns text replacement.

Avoid When

  • Exposing a global app launcher — use command-palette instead.
  • Selecting from a static form option list — use combobox instead.
Live preview
02

When to use

Use when
  • Showing a contextual command list at the caret while a user types in a textarea or input.
  • Building slash-command insertion flows where the host owns text replacement.
Avoid when
  • Exposing a global app launcher — use command-palette instead.
  • Selecting from a static form option list — use combobox instead.
03

Examples

Slash commands in a textarea

A caret-anchored command menu controlled by a textarea host.

04

Props

Props for command-menu
Name Type Default Required Bindable Description
listboxId text Stable listbox id. Defaults to a generated component id.
open boolean false bind Open state. Bindable. Default false.
anchor HTMLInputElement | HTMLTextAreaElement | null req Text field used as the caret-position anchor.
caretIndex number req Caret offset within the anchor value.
query text '' bind Query text after the trigger character. Bindable. Default ''.
items snippet req Render command items for the current query.
empty snippet Optional empty state rendered after item registration settles.
placement 'top''bottom''left''right''top-start''top-end''bottom-start''bottom-end' 'bottom-start' Caret-relative placement. Default 'bottom-start'.
offset number 6 Distance in px between the caret and menu. Default 6.
label text 'Commands' Accessible listbox label. Default 'Commands'.
onSelect (detail: CommandMenuSelection) => void Invoked when an enabled command is activated.
onDismiss () => void Invoked when Escape or outside pointerdown dismisses the menu.
onStateChange (state: CommandMenuState) => void One-way state output for host-owned field ARIA.