Acronis UIKit
Components

SearchGlobal

A prominent global search field with a gradient border.

Usage

import { SearchGlobal } from '@acronis-platform/ui-react';

SearchGlobal is the app-level global search field — a leading magnifier, the input, and an optional trailing keyboard-shortcut hint. It paints a gradient border via the --ui-input-search-* tokens and accepts every standard <input> attribute.

Examples

A global search field with the default shortcut hint:

<SearchGlobal placeholder="Search everything…" />

Customize or hide the shortcut hint:

<SearchGlobal placeholder="Search…" shortcut="⌘K" />
<SearchGlobal placeholder="Search…" shortcut={null} />

Controlled:

const [query, setQuery] = React.useState('');

<SearchGlobal
  value={query}
  onChange={(e) => setQuery(e.target.value)}
  placeholder="Search everything…"
/>

API Reference

Prop

Type

Edit on GitHub

On this page