sp-search
NPM
0.43.0
Storybook
View Storybook
Try it on
webcomponents.dev
Attributes and Properties #
action
action
string
''
autocomplete
autocomplete
| 'list' | 'none' | HTMLInputElement['autocomplete'] | HTMLTextAreaElement['autocomplete'] | undefined
disabled
disabled
boolean
false
grows
grows
boolean
false
holdValueOnEscape
holdValueOnEscape
boolean
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
name
name
string | undefined
pattern
pattern
string | undefined
placeholder
placeholder
string
'Search'
quiet
quiet
boolean
false
readonly
readonly
boolean
false
required
required
boolean
false
rows
rows
number
-1
tabIndex
tabIndex
number
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';
Sizes #
<sp-search size="s"></sp-search> <sp-search size="s" disabled></sp-search>
<sp-search></sp-search> <sp-search disabled></sp-search>
<sp-search size="l"></sp-search> <sp-search size="l" disabled></sp-search>
<sp-search size="xl"></sp-search> <sp-search size="xl" 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.
Properties #
holdValueOnEscape #
- Type:
boolean
- Default:
false
If holdValueOnEscape
controls whether the typed value should be held (i.e., not cleared or reset) when the Escape key is pressed. If set to true, pressing the Escape key will not affect the value in the search field.