# Command
## Usage This component ships `command()` and `command_dialog()` macros for Jinja and Nunjucks. Import Tailwind and one full Basecoat style bundle. ```css @import "tailwindcss"; @import "basecoat-css/vega.css"; ``` Or import only the base CSS, Command component CSS, and one style pack. ```css @import "tailwindcss"; @import "basecoat-css/base.css"; @import "basecoat-css/components/command.css"; @import "basecoat-css/styles/vega.css"; ``` Using CDN or bundler imports? See the [Installation page](/installation). Copy or serve the full Basecoat JavaScript bundle. ```html ``` Or copy or serve the Basecoat runtime and Command script. ```html ``` Using CDN or bundler imports? See the [Installation page](/installation). ```html
``` Use `` for the command palette variant. ```html
``` ### HTML structure The command menu can be used standalone or inside a native dialog. The structure is:
<dialog class="command-dialog"> Optional
Dialog variant. Wraps one direct child <div class="command">. Add aria-label or aria-labelledby for an accessible name.
<div class="command">
Root command menu. Can also be used standalone without the dialog wrapper. Add data-filter="manual" when your app owns filtering, such as remote search or a local Lunr index.
<header>
Search input wrapper. The macro includes a search icon and input.
<input type="text" role="combobox">
Filter input. Use aria-expanded="true" and aria-controls="{ MENU_ID }" to point to the command list.
<div role="menu" id="{ MENU_ID }">
Command list. Set data-empty to customize the empty state.
<div role="group" aria-labelledby="{ HEADING_ID }"> Optional
Groups related command items. Hidden automatically when every item in the group is filtered out.
<span role="heading" id="{ HEADING_ID }"> Optional
Group heading. Use an id when the parent group uses aria-labelledby.
<div role="menuitem"> or <a role="menuitem">
Selectable command item. Use <a> for navigation and <div> for actions. Supports data-filter, data-keywords, data-force, data-keep-command-open, aria-disabled="true", and data-disabled="true".
<span data-shortcut> Optional
Shortcut hint aligned to the inline end of the item.
<span data-indicator> Optional
Item indicator. It becomes visible with data-checked="true" or aria-selected="true".
<hr role="separator"> Optional
Separator between groups/items. Hidden while filtering.
### JavaScript API | API | Type | Description | | --- | --- | --- | | `command.refresh()` | Method | Rescans command items after children change inside the existing `role="menu"` list. | ## Examples ### Basic A simple command menu in a dialog.
### Shortcuts
### Groups
### Scrollable
## RTL Add `dir="rtl"` to the command root or an ancestor.