# command — Examples

## inline (not in dialog)

```html
<command-ui placeholder="Search commands..." style="width:32rem; max-height:24rem; border:1px solid var(--a-border); border-radius:var(--a-radius-lg);">
  <optgroup label="Pages">
    <option value="home" data-icon="house">Home</option>
    <option value="dashboard" data-icon="chart-bar">Dashboard</option>
    <option value="settings" data-icon="gear">Settings</option>
  </optgroup>
  <optgroup label="Actions">
    <option value="new" data-icon="plus">Create New</option>
    <option value="search" data-icon="magnifying-glass">Search</option>
  </optgroup>
</command-ui>
```

## grouped options with icons

```html
<command-ui placeholder="Type a command..." style="width:32rem; max-height:24rem; border:1px solid var(--a-border); border-radius:var(--a-radius-lg);">
  <optgroup label="Navigation">
    <option value="home" data-icon="house">Go to Home</option>
    <option value="projects" data-icon="folder">Go to Projects</option>
    <option value="settings" data-icon="gear">Go to Settings</option>
    <option value="profile" data-icon="user">Go to Profile</option>
  </optgroup>
  <optgroup label="Team">
    <option value="members" data-icon="users">View Members</option>
    <option value="roles" data-icon="shield">Manage Roles</option>
    <option value="invites" data-icon="envelope">Send Invites</option>
  </optgroup>
  <optgroup label="Account">
    <option value="billing" data-icon="credit-card">Billing</option>
    <option value="logout" data-icon="sign-out">Log Out</option>
  </optgroup>
</command-ui>
```

## with shortcuts

```html
<command-ui placeholder="Search..." style="width:32rem; max-height:24rem; border:1px solid var(--a-border); border-radius:var(--a-radius-lg);">
  <optgroup label="Actions">
    <option value="new-file" data-icon="file-plus" data-shortcut="&#8984;N">New File</option>
    <option value="open" data-icon="folder-open" data-shortcut="&#8984;O">Open File</option>
    <option value="save" data-icon="floppy-disk" data-shortcut="&#8984;S">Save</option>
    <option value="find" data-icon="magnifying-glass" data-shortcut="&#8984;F">Find</option>
    <option value="replace" data-icon="swap" data-shortcut="&#8984;H">Find &amp; Replace</option>
  </optgroup>
  <optgroup label="View">
    <option value="toggle-sidebar" data-icon="sidebar" data-shortcut="&#8984;B">Toggle Sidebar</option>
    <option value="toggle-theme" data-icon="moon" data-shortcut="&#8984;D">Toggle Theme</option>
    <option value="zen-mode" data-icon="arrows-out" data-shortcut="&#8984;K Z">Zen Mode</option>
  </optgroup>
</command-ui>
```
