Command Bar — ARC UI

Components

Command Bar

navigation

interactive

<arc-command-bar>

Overview

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

Use CommandBar when search is secondary — prefer CommandPalette for on-demand access
Place multiple CommandBars on the same page
Omit the placeholder — an empty input gives no affordance
Use CommandBar as a general-purpose text input — it is styled for search context only
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 behaviour
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: `
    <CommandBar
      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

Prop	Type	Default	Description
`placeholder`	`string`	`'Search...'`	Placeholder text displayed when the input is empty. Use it to communicate the scope of the search.
`value`	`string`	`''`	The current value of the input. Set externally to control the input state programmatically.
`icon`	`string`	`'magnifying-glass'`	Icon name displayed before the input. Accepts any Phosphor icon name.

Events

Event	Description
`arc-input`	Fired on every keystroke with detail: { value }.
`arc-submit`	Fired when the user presses Enter with detail: { value }.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

ARC UI

Arclight