Command Bar

Always-visible search input that sits inside a top bar. Accent-primary bottom border on focus with a glow ring.

Components

Command Bar

navigation

interactive

<arc-command-bar>

Overview

CommandBar is a persistent search-and-command input that lives inside a TopBar or toolbar region. Unlike CommandPalette, which is a modal overlay triggered by a keyboard shortcut, CommandBar is always visible and ready for input. It suits applications where search is a primary workflow, such as admin dashboards, documentation sites, and developer tools. When focused, the input reveals an accent-primary bottom border with a subtle glow ring. The component dispatches `arc-input` on every keystroke for live filtering and `arc-submit` when the user presses Enter, so you can wire up search-as-you-type or explicit command submission. CommandBar is minimal: it handles the input chrome and events and leaves result rendering to your application. Pair it with a dropdown or popover to display search results, or route the submitted value to a dedicated search results page. For modal command experiences, use CommandPalette instead.

Guidelines

When to use

Place inside a TopBar or toolbar for consistent positioning
Use a descriptive placeholder like "Search docs..." to hint at scope
Listen to arc-input for search-as-you-type and arc-submit for explicit queries
Pair with a dropdown or popover to display search results inline
Constrain the width with max-width so the bar does not dominate the toolbar

When not to use

Do not use CommandBar when search is secondary. Prefer CommandPalette for on-demand access
Do not place multiple CommandBars on the same page
Do not omit the placeholder; an empty input gives no affordance
Do not use CommandBar as a general-purpose text input; it is styled for search only
Do not forget to handle the arc-submit event; users expect Enter to do something

Features

Always-visible search input for persistent toolbar placement
Accent-primary bottom border with glow ring on focus
`arc-input` event on every keystroke for live filtering
`arc-submit` event on Enter for explicit command submission
Customisable placeholder text
Controlled value prop for external state management
Keyboard accessible with standard input behavior
Token-driven theming via CSS custom properties

Preview

Usage

This component requires JavaScript. No pure HTML/CSS version is available. Use the Web Component directly or a framework wrapper.

<script type="module" src="@arclux/arc-ui"></script>

<arc-command-bar placeholder="Search..." id="search"></arc-command-bar>

<script>
  const bar = document.querySelector('#search');
  bar.addEventListener('arc-input', (e) => {
    console.log('typing:', e.detail.value);
  });
  bar.addEventListener('arc-submit', (e) => {
    console.log('submitted:', e.detail.value);
  });
</script>

import { CommandBar } from '@arclux/arc-ui-react';

export function AppSearch() {
  return (
    <CommandBar
      placeholder="Search..."
      onArcInput={(e) => console.log('typing:', e.detail.value)}
      onArcSubmit={(e) => console.log('submitted:', e.detail.value)}
    />
  );
}

<script setup>
import { CommandBar } from '@arclux/arc-ui-vue';

function onInput(e) {
  console.log('typing:', e.detail.value);
}
function onSubmit(e) {
  console.log('submitted:', e.detail.value);
}
</script>

<template>
  <CommandBar
    placeholder="Search..."
    @arc-input="onInput"
    @arc-submit="onSubmit"
  />
</template>

<script>
  import { CommandBar } from '@arclux/arc-ui-svelte';

  function handleInput(e) {
    console.log('typing:', e.detail.value);
  }
  function handleSubmit(e) {
    console.log('submitted:', e.detail.value);
  }
</script>

<CommandBar
  placeholder="Search..."
  on:arc-input={handleInput}
  on:arc-submit={handleSubmit}
/>

import { Component } from '@angular/core';
import { CommandBar } from '@arclux/arc-ui-angular';

@Component({
  imports: [CommandBar],
  template: `
    <arc-command-bar
      placeholder="Search..."
      (arc-input)="onInput($event)"
      (arc-submit)="onSubmit($event)"
    />
  `,
})
export class AppSearchComponent {
  onInput(e: CustomEvent) {
    console.log('typing:', e.detail.value);
  }
  onSubmit(e: CustomEvent) {
    console.log('submitted:', e.detail.value);
  }
}

import { CommandBar } from '@arclux/arc-ui-solid';

export function AppSearch() {
  return (
    <CommandBar
      placeholder="Search..."
      onArcInput={(e) => console.log('typing:', e.detail.value)}
      onArcSubmit={(e) => console.log('submitted:', e.detail.value)}
    />
  );
}

import { CommandBar } from '@arclux/arc-ui-preact';

export function AppSearch() {
  return (
    <CommandBar
      placeholder="Search..."
      onArcInput={(e) => console.log('typing:', e.detail.value)}
      onArcSubmit={(e) => console.log('submitted:', e.detail.value)}
    />
  );
}

API

placeholderstring='Search…': Placeholder text displayed when the input is empty. Use it to communicate the scope of the search.
valuestring='': The current value of the input. Set externally to control the input state programmatically.
iconstring='magnifying-glass': Icon name displayed before the input. Accepts any Phosphor icon name.
labelstring='': Accessible name for the input, applied as aria-label. Defaults to "Search". A placeholder is not a name: it is announced inconsistently and disappears the moment the user types.

Events

arc-inputdetail:{ value: string }: Fired on every keystroke with detail: { value }.
arc-submitdetail:{ value: string }: Fired when the user presses Enter with detail: { value }.

Command Bar

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight