Search

Search input with a magnifying glass icon, clear button, loading spinner, and autocomplete suggestions dropdown.

Components

input

interactive

<arc-search>

Overview

Search is a purpose-built input component for search and filter interactions. It wraps a text input with a leading magnifying glass icon, an optional clear button, and a loading spinner that can be toggled while results are being fetched. When `<arc-suggestion>` child elements are provided, the component displays a dropdown of autocomplete suggestions that the user can navigate with the keyboard or mouse. The component fires three distinct events to cover the full search lifecycle: `arc-input` on every keystroke for live filtering, `arc-change` when the user presses Enter to submit, and `arc-select` when a suggestion is chosen. The clear button (visible when the input has content) resets the field and dispatches `arc-clear`, then returns focus to the input for a seamless editing flow. Suggestions are provided declaratively with `<arc-suggestion>` elements, each carrying a `value` and a visible label. The dropdown opens on focus when suggestions exist and supports ArrowUp/ArrowDown navigation, Enter to select, and Escape to dismiss. The search input uses `role="searchbox"` and connects to the suggestion listbox with proper ARIA attributes for screen reader compatibility.

Guidelines

When to use

Provide a `label` for accessibility even if you visually hide it with CSS
Use `placeholder` to describe what the user can search for, e.g. "Search components..."
Set `loading` to true while fetching results to give the user visual feedback
Provide `<arc-suggestion>` elements for common or recent queries to speed up discovery
Listen to `arc-input` for debounced live search, and `arc-change` for explicit submission

When not to use

Do not use Search for generic text input — use Input or Textarea for non-search fields
Do not populate suggestions with hundreds of items — keep the list to 8-10 for usability
Do not rely solely on the clear button for resetting — also handle programmatic value clearing
Do not use `loading` without actually fetching data — it misleads users about system activity
Avoid placing Search inside a container with `overflow: hidden` that would clip the suggestion dropdown

Features

Built-in magnifying glass search icon positioned inside the input field
Clear button that appears when the input has a value, with `arc-clear` event on click
Loading spinner toggled via the `loading` prop, replacing the clear button while active
Autocomplete suggestions dropdown via `<arc-suggestion>` child elements
Full keyboard navigation: ArrowUp/Down through suggestions, Enter to select or submit, Escape to close
Three event types: `arc-input` (keystrokes), `arc-change` (submit), `arc-select` (suggestion picked)
Automatic outside-click dismissal of the suggestion dropdown
Accessible `role="searchbox"` with `aria-expanded` and `role="listbox"` for suggestions

Preview

Button

Modal

Table

Tabs

Usage

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

<arc-search label="Search" placeholder="Search docs...">
  <arc-suggestion value="getting-started">Getting Started</arc-suggestion>
  <arc-suggestion value="components">Components</arc-suggestion>
</arc-search>

import { Search, Suggestion } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <Search label="Search" placeholder="Search docs...">
      <Suggestion value="getting-started">Getting Started</Suggestion>
      <Suggestion value="components">Components</Suggestion>
    </Search>
  );
}

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

<template>
  <Search label="Search" placeholder="Search docs...">
    <Suggestion value="getting-started">Getting Started</Suggestion>
    <Suggestion value="components">Components</Suggestion>
  </Search>
</template>

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

<Search label="Search" placeholder="Search docs...">
  <Suggestion value="getting-started">Getting Started</Suggestion>
  <Suggestion value="components">Components</Suggestion>
</Search>

import { Component } from '@angular/core';
import { Search, Suggestion } from '@arclux/arc-ui-angular';

@Component({
  imports: [Search, Suggestion],
  template: `
    <arc-search label="Search" placeholder="Search docs...">
      <arc-suggestion value="getting-started">Getting Started</arc-suggestion>
      <arc-suggestion value="components">Components</arc-suggestion>
    </arc-search>
  `,
})
export class MyComponent {}

import { Search, Suggestion } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <Search label="Search" placeholder="Search docs...">
      <Suggestion value="getting-started">Getting Started</Suggestion>
      <Suggestion value="components">Components</Suggestion>
    </Search>
  );
}

import { Search, Suggestion } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <Search label="Search" placeholder="Search docs...">
      <Suggestion value="getting-started">Getting Started</Suggestion>
      <Suggestion value="components">Components</Suggestion>
    </Search>
  );
}

API

value string ='': Current text content of the search input.
placeholder string ='Search...': Hint text displayed when the input is empty.
label string ='': Accessible label for the search field. Rendered visually above the input when provided.
disabled boolean =false: Disables the input, reducing opacity and blocking interaction.
loading boolean =false: Shows a spinning indicator in place of the clear button to signal in-progress loading.
open boolean =false: Whether the suggestion dropdown is visible. Reflected so it can be opened programmatically or styled from CSS.

Events

arc-input detail: { value: string }: Fired on each keystroke in the search field
arc-clear: Fired when the clear button is clicked
arc-change detail: { value: string }: Fired when the value is committed: Enter in the field, or a suggestion selected by click or keyboard
arc-select: Fired when a suggestion is selected (before the accompanying arc-change)

Suggestion

<arc-suggestion>

Autocomplete suggestion item inside a Search component.

label
value string ='': Suggestion value