sp-search
Attributes and Properties #
action
action
string
''
allowedKeys
allowed-keys
string
''
autocomplete
autocomplete
| HTMLInputElement['autocomplete'] | HTMLTextAreaElement['autocomplete'] | undefined
focused
focused
boolean
false
grows
grows
boolean
false
invalid
invalid
boolean
false
label
label
string
'Search'
maxlength
maxlength
number
-1
method
method
'GET' | 'POST' | 'dialog' | undefined
minlength
minlength
number
-1
multiline
multiline
boolean
false
pattern
pattern
string | undefined
placeholder
placeholder
string
'Search'
quiet
quiet
boolean
false
readonly
readonly
boolean
false
required
required
boolean
false
_type
type
TextfieldType
'text'
valid
valid
boolean
false
value
value
string | number
Slots #
help-text
negative-help-text
Events #
change
Event
An alteration to the value of the element has been committed by the user.
input
Event
The value of the element has changed.
submit
Event
The search form has been submitted.
Description #
The <sp-search>
element delivers a single input field with a "reset" button as well as a mangifying glass icon with which to power search interactions.
Usage #
yarn add @spectrum-web-components/search
Import the side effectful registration of <sp-search>
via:
import '@spectrum-web-components/search/sp-search.js';
When looking to leverage the Search
base class as a type and/or for extension purposes, do so via:
import { Search } from '@spectrum-web-components/search';
Example #
<sp-search></sp-search>
<sp-search disabled></sp-search>
Variants #
Quiet #
<sp-search quiet></sp-search>
<sp-search quiet disabled></sp-search>
Events #
The submit
event fires when the <sp-search>
is submitted. This is a non-composed
event inline with what you would expect a <form />
<form />
element will also be prevented, which will allow you to handle the search action in javascript.