Agriculture Design System
Design System for the Export Service

Search input

Search input enables users to enter a word or phrase to find relevant content.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/search-input';
Open in Playroom, opens in a new tab
<SearchInput label="Search" />

The SearchInput component can be used as a filter to aid the user in finding content that has already been loaded on the page.

For use cases where you need a search form with a submit button, the Search Box component can be used instead.

By default, the SearchInput component does not expand to fill the available space.


  • use to filter results on a page
  • provide a meaningful label – for example, Search components
  • hide the ‘optional’ label.


  • use to fetch results from a server – use SearchBox or Autocomplete
  • hide the search icon or clear button
  • use for global site search - use SearchBox.


Use the hint prop to provide help that’s relevant to the majority of users, like how their information will be used, or where to find it.

Don’t use long paragraphs and lists in hint text. Screen readers read out the entire text when users interact with the form element. This could frustrate users if the text is long.

Don’t include links within hint text. While screen readers will read out the link text when describing the field, they will not tell users that the text is a link.

<SearchInput label="Search" hint="Hint text" />


The required prop can be used to indicate that user input is required on the field before a form can be submitted.

Required fields do not append ‘(optional)’ to the label and also use aria-required to indicate to screen readers that the field is required.

Hide optional label

The hideOptionalLabel prop can be used in situations where you want to indicate to screen reader users that a field is optional but don’t want to show the ‘(optional)’ label.

The usage of hideOptionalLabel should be reserved for inputs that filter data in a table or chart, and should never be used in standard forms for submitting information.

<Stack gap={1}>
	<SearchInput label="Required" required />
	<SearchInput label="Optional" required={false} />
		label="Optional with hideOptionalLabel"


Use the invalid prop to indicate if the user input is invalid.

	message="A search term is required to see results"


Disabled input elements are unusable and can not be clicked. This prevents a user from interacting with the input element until another action is complete.

<SearchInput label="Search" disabled />


Use the block prop to expand the component to fill the available space.

<SearchInput label="Search" block />
  • Search box An input that allows users to enter a keyword to search a website for specific content.