sp-search

Examples API

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 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 _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 #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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 #

Small 
<sp-search size="s"></sp-search>
<sp-search size="s" disabled></sp-search>
 Medium 
<sp-search></sp-search>
<sp-search disabled></sp-search>
 Large 
<sp-search size="l"></sp-search>
<sp-search size="l" disabled></sp-search>
 Extra Large 
<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 />{:target="_blank"} to fire. If you choose to prevent the default of this event, the default action for the underlying <form /> element will also be prevented, which will allow you to handle the search action in javascript.