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

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

Props

SearchBox Props
PropTypeDescription
aria-label?string
children?ReactNode
onSubmit?FormEventHandler<HTMLFormElement>
SearchBoxInput Props
PropTypeDescription
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[]
SearchBoxButton Props
PropTypeDescription
childrenstring
iconOnly?ResponsiveProp<boolean>
ref?Ref<HTMLButtonElement>

Source

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