SearchField

<SearchField aria-label="Search" placeholder="Search everything…" />

const [value, setValue] = useState("Company");
const suggestions = [
  {
    "id": "acme",
    "label": "Acme Company",
    "description": "acme.example",
    "section": "In your directory",
    "meta": "Open",
    "isDisabled": false
  },
  {
    "id": "aster",
    "label": "Aster Company",
    "description": "aster.example",
    "section": "In your directory",
    "meta": "Open",
    "isDisabled": false
  },
  {
    "id": "atlas",
    "label": "Atlas Company",
    "description": "atlas.example",
    "section": "In your directory",
    "meta": "Open",
    "isDisabled": true
  },
  {
    "id": "beacon",
    "label": "Beacon Company",
    "description": "beacon.example",
    "section": "In your directory",
    "meta": "Open",
    "isDisabled": false
  },
  {
    "id": "birch",
    "label": "Birch Company",
    "description": "birch.example",
    "section": "Find a company",
    "meta": "Preview",
    "isDisabled": false
  },
  {
    "id": "cedar",
    "label": "Cedar Company",
    "description": "cedar.example",
    "section": "Find a company",
    "meta": "Preview",
    "isDisabled": false
  },
  {
    "id": "clover",
    "label": "Clover Company",
    "description": "clover.example",
    "section": "Find a company",
    "meta": "Preview",
    "isDisabled": false
  },
  {
    "id": "copper",
    "label": "Copper Company",
    "description": "copper.example",
    "section": "Find a company",
    "meta": "Preview",
    "isDisabled": false
  },
  {
    "id": "evergreen",
    "label": "Evergreen Company",
    "description": "evergreen.example",
    "section": "Find a company",
    "meta": "Preview",
    "isDisabled": false
  },
  {
    "id": "fieldwork",
    "label": "Fieldwork Company",
    "description": "fieldwork.example",
    "section": "Find a company",
    "meta": "Preview",
    "isDisabled": false
  },
  {
    "id": "harbor",
    "label": "Harbor Company",
    "description": "harbor.example",
    "section": "Find a company",
    "meta": "Preview",
    "isDisabled": false
  },
  {
    "id": "juniper",
    "label": "Juniper Company",
    "description": "juniper.example",
    "section": "Find a company",
    "meta": "Preview",
    "isDisabled": false
  },
  {
    "id": "maple",
    "label": "Maple Company",
    "description": "maple.example",
    "section": "Find a company",
    "meta": "Preview",
    "isDisabled": false
  },
  {
    "id": "northstar",
    "label": "Northstar Company",
    "description": "northstar.example",
    "section": "Find a company",
    "meta": "Preview",
    "isDisabled": false
  },
  {
    "id": "orchard",
    "label": "Orchard Company",
    "description": "orchard.example",
    "section": "Find a company",
    "meta": "Preview",
    "isDisabled": false
  },
  {
    "id": "willow",
    "label": "Willow Company",
    "description": "willow.example",
    "section": "Find a company",
    "meta": "Preview",
    "isDisabled": false
  }
];

<SearchField
  label="Company"
  value={value}
  onChange={setValue}
  size="md"
  isDisabled={false}
  suggestions={suggestions.filter(item => `${item.label} ${item.description}`.toLowerCase().includes(value.toLowerCase()))}
  isLoading={false}
  minChars={2}
  emptyMessage="No companies found. Try another name."
  onSelect={item => setValue(item.label)}
  footer="↑ ↓ to browse · Enter to select · Esc to dismiss"
/>