SearchField

In context

Large workspace search with shortcut hint, live directory filter, help-center scoped search, and a noClear command bar.

Workspace search

Large search with helper meta and shortcut hint.

Searching for "payroll april"…Press⌘K

Help center

Scoped search returns matching articles only.

How payroll runs workPayroll

Command bar

`noClear` removes the inline reset affordance.

Without the clear button, the field reads as a command surface rather than a list filter.

Basic controlled search

import { useState } from 'react';
import { SearchField } from '@mihcm/ui/SearchField';
 
const [query, setQuery] = useState('');
 
<SearchField
  value={query}
  onValueChange={setQuery}
  placeholder="Search anything…"
/>

Employee lookup (MiHCM Security)

<SearchField
  value={query}
  onValueChange={setQuery}
  placeholder="Search by name, email, or employee number…"
  className="w-full"
/>

With shortcut hint

<SearchField
  value={query}
  onValueChange={setQuery}
  size="sm"
  placeholder="Search docs…"
  trailingSlot={
    <kbd className="rounded border border-border px-1.5 text-[10px] text-muted-foreground">
      ⌘K
    </kbd>
  }
/>

Debounced filter

import { useEffect, useState } from 'react';
import { SearchField } from '@mihcm/ui/SearchField';
 
const [value, setValue] = useState('');
 
useEffect(() => {
  const id = setTimeout(() => onSearch(value), 300);
  return () => clearTimeout(id);
}, [value, onSearch]);
 
<SearchField value={value} onValueChange={setValue} />