Actions

CommandItem

Single selectable row inside a command palette or inline command menu that registers itself with the parent command list.

import { CommandItem } from '@lostgradient/cinder/command-item';
actioncommand
01

Overview

Individual selectable row within a command palette or dropdown command list.

Usage

svelte 
<script lang="ts">
  import CommandItem from '@lostgradient/cinder/command-item';
  import CommandPalette from '@lostgradient/cinder/command-palette';

  let open = $state(true);
</script>

<CommandPalette bind:open label="Commands">
  {#snippet items()}
    <CommandItem value="new-file" onSelect={() => {}}>New file</CommandItem>
  {/snippet}
</CommandPalette>

CommandItemProps is a discriminated union that the table above flattens to one row. With the default selectionMode: 'item', onSelect is required. With selectionMode: 'parent' — the mode CommandMenu uses — onSelect is optional and activation is owned by the parent list.

02

When to use

Use when
  • Declaring an individual command, action, or result row inside a command-palette or command-menu.
  • Composing a custom palette layout via children rather than the items prop.
Avoid when
  • Used outside a command-palette or command-menu ancestor — the component throws at construction.
  • Rendering a generic dropdown choice — use dropdown-item instead.
03

Props

Props for command-item
Name
Type
Default
Description
value required text Submitted value; surfaced through the registration record.
onSelect () => void Invoked when the item is activated inside CommandPalette.
selectionMode 'item' 'item' selectionMode is a compile-time discriminant that only controls whether onSelect is required; it has no runtime effect on activation dispatch. 'item' is the default CommandPalette mode, in which this component's own onSelect is required.
disabled boolean false When true, the item is skipped by arrow keys and cannot be activated.
description text Optional secondary text shown below the main label.
accessibleLabel text Accessible name for the option when the rendered row contains secondary text or rich content.
keyboardShortcut text Keyboard shortcut exposed through aria-keyshortcuts, e.g. Meta+N.
leading snippet Leading content (icon, avatar). Rendered with aria-hidden.
trailing snippet Trailing content (kbd hint, badge). Rendered with aria-hidden.
children required snippet Main label content.