sp-search
Attributes and Properties #
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
action | action | string | '' | |
allowedKeys | allowed-keys | string | '' | |
autocomplete | autocomplete | | HTMLInputElement['autocomplete'] | HTMLTextAreaElement['autocomplete'] | undefined | | |
autofocus | autofocus | boolean | false | When this control is rendered, focus it automatically |
dir | dir | 'ltr' | 'rtl' | 'ltr' | |
disabled | disabled | boolean | false | Disable this control. It will not receive focus or events |
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 | |
tabIndex | tabIndex | number | | The tab index to apply to this control. See general documentation about the tabindex HTML property |
_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. |
CSS Custom Properties #
| Name | Default |
|---|---|
--spectrum-actionbutton-m-texticon-min-width | var(--spectrum-global-dimension-size-400) |
--spectrum-alias-search-border-radius | var(--spectrum-global-dimension-size-50) |
--spectrum-alias-search-border-radius-quiet | 0 |
--spectrum-alias-search-padding-left-m | undefined |
--spectrum-alias-ui-icon-cross-size-100 | undefined |
--spectrum-alias-workflow-icon-size-m | var(--spectrum-global-dimension-size-225) |
--spectrum-search-m-icon-color-down | var(--spectrum-alias-component-icon-color-down) |
--spectrum-search-m-icon-color-hover | var(--spectrum-alias-component-icon-color-hover) |
--spectrum-search-m-icon-color-key-focus | var(--spectrum-alias-component-icon-color-key-focus) |
--spectrum-textfield-m-texticon-border-size | var(--spectrum-alias-input-border-size) |
--spectrum-textfield-m-texticon-icon-color | var(--spectrum-alias-component-icon-color-default) |
--spectrum-textfield-m-texticon-icon-gap | var(--spectrum-global-dimension-size-100) |
--spectrum-textfield-m-texticon-text-color-disabled | var(--spectrum-alias-component-text-color-disabled) |
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.