Simple command dropdown for filtering and selecting commands.

Shows a list of commands filtered by case-insensitive substring as the user types. Similar to typing / in Claude Code to see available slash commands.

Usage

# Define commands
commands = [
  %{id: :help, label: "/help"},
  %{id: :save, label: "/save"},
  %{id: :quit, label: "/quit"}
]

# Create and show palette
props = CommandPalette.new(commands: commands)
{:ok, palette} = CommandPalette.init(props)

# Render dropdown when visible
if CommandPalette.visible?(palette) do
  CommandPalette.render(palette, area)
end

Keyboard Navigation

• Type to filter by case-insensitive substring
• Up/Down: Navigate through results
• Enter: Select the highlighted command and close the palette
• Escape: Close dropdown
• Backspace: Delete character

Monochrome Compatibility

This widget is fully functional in monochrome terminals:

• Selected items use reverse video for visibility
• Filter input uses bold text for focus indication
• All visual states remain distinguishable without color

The widget automatically uses theme component styles which include monochrome-visible attributes (reverse, bold).