Search

React

Angular

Web Components

const [search, setSearch] = useState("");

  const onClick = () => {
    console.log("search:", search);
  };

<form>
      <GoabFormItem>
        <GoabBlock gap="xs" direction="row">
          <GoabInput
            type="search"
            name="search"
            value={search}
            onChange={(e) => setSearch(e.value)}
            leadingIcon="search"
          />
          <GoabButton type="primary" onClick={onClick}>
            Search
          </GoabButton>
        </GoabBlock>
      </GoabFormItem>
    </form>

A search input pattern with a search icon and button for users to find content or filter results.

When to use

Use this pattern when:

Users need to search through content or data
Filtering a list or table by text input
Providing a site-wide or section search
Quick access to specific records is needed

Considerations

Include a leading search icon for clear affordance
Use an explicit search button for clarity
Consider search suggestions or autocomplete for large datasets
Provide clear feedback when no results are found
Keep the search input appropriately sized for expected query length