sp-search
Attributes and Properties #
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
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 #
Name | Description |
---|---|
help-text | default or non-negative help text to associate to your form element |
negative-help-text | negative help text to associate to your form element when `invalid` |
Events #
Name | Type | Description |
---|---|---|
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.