Search

Search offers users a way to explore a website or application using keywords. Search can be used as the primary means of discovering content or as a filter to aid the user in finding content.

Import statement

import { Search } from "@wfp/react"

Expand code

Editable Example

() => {
  const handleOnChange = (searchValue, evt) => {
    console.log("searchValue", searchValue); // a string
    console.log("evt", evt); // the whole event object
  };

  return (
    <Search
      className="some-class"
      kind="large"
      name="input-name"
      labelText="Label"
      closeButtonLabelText="The label text for the close button"
      placeholder="Placeholder"
      onChange={handleOnChange}
    />
  );
};

References

Storybook