The search components should be used as a means of discovering content, or as a
filter to aid the user in finding content.
Field The SearchField component connects the label and description to the input
element.
Selected employees will be attached to this pay run
< SearchField
label = " Select employees "
description = " Selected employees will be attached to this pay run "
helpText = " You probably won't need help text for search fields "
placeholder = " Filter employees "
/>
Sizes The SearchField and SearchInput accept two sizes.
< Stack gap = " large " >
< SearchField size = " medium " label = " Medium (default) " placeholder = " Search " />
< SearchField size = " small " label = " Small " placeholder = " Search " />
</ Stack >
Clear Using the onClear property, the input value may be cleared by the user by
clicking the "x" icon or pressing "Escape" while the input is focused.
const [ value , setValue ] = useState ( '' ) ;
function handleChange ( event ) {
setValue ( event . target . value ) ;
}
function handleClear ( ) {
setValue ( '' ) ;
}
return (
< SearchField
label = " Controlled search "
value = { value }
onChange = { handleChange }
onClear = { handleClear }
placeholder = " Enter some text "
/>
) ;
The SearchInput component is exposed from the package, though you'll most
likely want the SearchField. When using the input be sure to maintain
accessibility.
Composite component Accessible description for inclusive components
< Columns gap = " large " >
< Stack gap = " xsmall " >
< FieldLabel htmlFor = " search-demo-input " > Composite component </ FieldLabel >
< FieldDescription id = " search-demo-description " >
Accessible description for inclusive components
</ FieldDescription >
</ Stack >
< SearchInput
id = " search-demo-input "
aria-describedby = " search-demo-description "
/>
</ Columns >
