Search input

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

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

Usage

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

For example:

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

SearchInput Props
Prop	Type	Description
label	string	Describes the purpose of the field.
autoFocus?	boolean
block?	boolean	If true, the field will stretch to the fill the width of its container.
defaultValue?	string \| number \| readonly string[]
disabled?	boolean
hideOptionalLabel?	boolean	If true, "(optional)" will never be appended to the label.
hint?	string	Provides extra information about the field.
id?	string
invalid?	boolean	If true, the invalid state will be rendered.
maxWidth?	SearchInputMaxWidth	The maximum width of the field.
message?	string	Message to show when the field is invalid.
name?	string
onBlur?	FocusEventHandler<HTMLInputElement>
onChange?	((value: string) => void)
onClear?	(() => void)	Function to be called when the input is cleared.
onFocus?	FocusEventHandler<HTMLInputElement>
ref?	Ref<HTMLInputElement>
required?	boolean	If false, "(optional)" will be appended to the label.
value?	string \| number \| readonly string[]

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