Search box

import { ... } from '@ag.ds-next/react/search-box';

<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>

Related components

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