Search Bar

Usage

import {
  SearchBar,
  SearchBarInput,
  SearchBarInputContainer,
  SearchBarSearchButton,
  SearchBarResults,
  SearchBarResultsList,
  SearchBarResultsItem,
  SearchBarClearButton,
  SearchBarHint,
} from "@govtechmy/myds-react/search-bar";

export default () => (
  <SearchBar size="large">
    <SearchBarInputContainer>
      <SearchBarInput value={query} onValueChange={setQuery} />
      <SearchBarHint>
        Press <Pill size="small">/</Pill> to search
      </SearchBarHint>
      <SearchBarClearButton />
      <SearchBarSearchButton />
    </SearchBarInputContainer>
    <SearchBarResults open={true}>
      <SearchBarResultsList>
        <SearchBarResultsItem value="foo" onSelect={...} >
          Foo
        </SearchBarResultsItem>
        <SearchBarResultsItem value="bar" onSelect={...} >
          Bar
        </SearchBarResultsItem>
      </SearchBarResultsList>
    </SearchBarResults>
  </SearchBar>
);

Examples

Size

Use the size prop to change the search bar's size.

Clear Button

You can use SearchBarClearButton to show a clear button.

Hint

Show a hint with SearchBarHint.

Show Search Results or Suggestions

You can show search results or suggestions with the SearchBarResults, SearchBarResultsList and SearchBarResultsItem components.

You can also group results with the SearchBarResultsGroup component:

Controlled Component

The search bar must be controlled with props:

• Set the value and onValueChange props for SearchBarInput
• Set the open prop for SearchBarResults

In the example below, we also keep track of whether the search bar is focused or not with a hasFocus state. This lets us open or close SearchBarResults based on the input's value and focus state.

Props

SearchBar

SearchBar is abstracted from cmdk's Command.Root. Please refer to the API references in this documentation.

SearchBarInput

SearchBarInput is abstracted from cmdk's Command.Input. Please refer to the API references in this documentation

SearchBarInputContainer

SearchBarInputContainer uses the same props as a regular div element.

SearchBarSearchButton

SearchBarSearchButton uses the same props as MYDS' Button. Please refer to the API references in this documentation

SearchBarClearButton

SearchBarClearButton uses the same props as MYDS' Button. Please refer to the API references in this documentation

SearchBarHint

SearchBarInputContainer uses the same props as a regular div element.

SearchBarResults

SearchBarResultsList

SearchBarResultsList is abstracted from cmdk's Command.List. Please refer to the API references in this documentation

SearchBarResultsItem

SearchBarResultsItem is abstracted from cmdk's Command.Item. Please refer to the API references in this documentation

SearchBarResultsGroup

SearchBarResultsGroup is abstracted from cmdk's Command.Group. Please refer to the API references in this documentation