Search Field

Search input with clear button, Escape to clear, and an optional shortcut hint.

Import

import { SearchField } from '@marbleui/ui'

Props

<SearchField>

Prop	Type	Default	Description
description	`ReactNode`	`—`
label	`ReactNode`	`—`
pill	`boolean`	`—`
placeholder	`string`	`'Search…'`
shortcut	`string`	`—`	Keyboard hint shown when empty, e.g. "⌘K".
variant	`FieldVariant`	`—`

Also accepts React Aria props (123).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Button · React Aria Group · React Aria Input · React Aria SearchField. Follow the primitive's docs for the full keyboard map.

Usage notes

Search input with a clear button and an optional shortcut hint. For picking from a list in a popover use ComboBox; to filter a visible list in place use Autocomplete.

<SearchField
  aria-label="Search"
  placeholder="Search docs"
  shortcut="⌘K"
  onSubmit={(query) => runSearch(query)}
/>

Controlled: value + onChange. onSubmit fires on Enter and onClear when cleared. Escape clears the field (React Aria SearchField).
shortcut is only a visual Kbd hint shown while empty. It does not register a key binding.
Without a visible label, pass aria-label. pill rounds the field; variant is outline or filled.

Example source · show

import { SearchField } from './search-field'

export const styles = {
  Outline: () => <SearchField className="w-72" aria-label="Search" shortcut="⌘K" />,
  Filled: () => <SearchField className="w-72" variant="filled" aria-label="Search people" placeholder="Search people" defaultValue="Maya" />,
  Pill: () => <SearchField className="w-72" pill aria-label="Search docs" placeholder="Search docs" />,
}

Source: packages/ui/src/search-field/search-field.tsx

Catalog

Category: inputs
Priority: Core
Primitive: react-aria
React Aria: SearchField