Search — ARC UI

Components

input

interactive

<arc-search>

Overview

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';

<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: `
    <Search label="Search" placeholder="Search docs...">
      <Suggestion value="getting-started">Getting Started</Suggestion>
      <Suggestion value="components">Components</Suggestion>
    </Search>
  `,
})
export class MyComponent {}

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

<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';

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

API

Prop	Type	Default	Description
`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.

Events

Event	Description
`arc-input`	Fired on each keystroke in the search field
`arc-clear`	Fired when the clear button is clicked
`arc-change`	Fired when the search value changes on blur
`arc-select`	Fired when a suggestion is selected

Suggestion

<arc-suggestion>

Autocomplete suggestion item inside a Search component.

Prop	Type	Default	Description
`value`	`string`	—	Suggestion value