Search box
An input that allows users to enter a keyword to search a website for specific content.
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.