CommandPalette
Search and commands: Ctrl or Cmd K, combobox over a listbox, items loaded on first open.
beta
Try it
<CommandPalette id="playground-command-palette" placeholder="Search deployments, invoices, or team members" empty="No results found." />Examples
Quick actions
<script lang="ts">
import Button from '@tcpsystems/ui/foundation/Button';
import CommandPalette from '@tcpsystems/ui/foundation/CommandPalette';
const uid = $props.id();
</script>
<Button data-tcp-open={uid}>Open command palette</Button>
<CommandPalette
id={uid}
label="Search commands"
placeholder="Search deployments, invoices, or team members"
empty="No commands match. Try a deployment name or invoice number."
/>Custom labels
<script lang="ts">
import Button from '@tcpsystems/ui/foundation/Button';
import CommandPalette from '@tcpsystems/ui/foundation/CommandPalette';
const uid = $props.id();
</script>
<Button variant="ghost" icon="search" data-tcp-open={uid}>Find invoice</Button>
<CommandPalette
id={uid}
label="Find invoice"
placeholder="Search by invoice number or customer"
empty="No invoices found. Try INV-2048 or Acme Labs."
/>API
import CommandPalette from '@tcpsystems/ui/foundation/CommandPalette';| Prop | Type | Default |
|---|---|---|
mode? | 'palette' | 'dialog' | 'trigger' | 'palette' |
id? | string | none |
src? | string | none |
items? | PaletteItem[] | none |
recentItems? | PaletteItem[] | none |
label? | string | 'Search' |
placeholder? | string | 'Search' |
empty? | string | 'Nothing matches. Try fewer words, or part of a name.' |
results? | R[] | [] |
query? | string | '' |
shortcut? | string | 'Ctrl K' |
| Hook | Kind |
|---|---|
.tcp-search-trigger | Root class |
data-position | Data attribute |
data-recent | Data attribute |
data-size | Data attribute |
data-src | Data attribute |