Agriculture Design System
Beta
Design System for the Export Service

Search box

An input that allows users to enter a keyword to search a website for specific content.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/search-box';
Open in Playroom, opens in a new tab
<SearchBox onSubmit={console.log}>
	<SearchBoxInput label="Search this website" />
	<SearchBoxButton>Search</SearchBoxButton>
</SearchBox>

Use the SearchBox component to help users find content or pages through keywords. This can be particularly useful for a web service with a large amount of pages.

Do

  • use to allow users to search for and discover content
  • include placeholder text to explain what the box is for
  • use to search for content on a server

Don’t

  • use to filter information that has loaded – use SearchInput
  • indicate that the field is optional
  • include a label.

Responsive icon

Use the iconOnly prop to configure at which breakpoints the search icon should replace the button label. This allows more space for text to be written in the text input.

<SearchBox onSubmit={console.log}>
	<SearchBoxInput label="Search this website" />
	<SearchBoxButton iconOnly={{ xs: true, md: false }}>Search</SearchBoxButton>
</SearchBox>
  • Search input Search input enables users to enter a word or phrase to find relevant content.