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

Usage

Search box components can be imported via the search-box entrypoint in the @ag.ds-next/react package.

For example:

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

SearchBox Props
Prop	Type	Description
aria-label?	string
children?	ReactNode
onSubmit?	FormEventHandler<HTMLFormElement>

SearchBoxInput Props
Prop	Type	Description
defaultValue?	string \| number \| readonly string[]
id?	string
label?	stringDefault: "Search"
labelVisible?	booleanDefault: false
name?	string
onBlur?	FocusEventHandler<HTMLInputElement>
onChange?	ChangeEventHandler<HTMLInputElement>
onFocus?	FocusEventHandler<HTMLInputElement>
placeholder?	string
ref?	Ref<HTMLInputElement>
value?	string \| number \| readonly string[]

You can view the full source code for this package on Github.