@spectrum-web-components/search
v0.42.2
Published
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.
Downloads
4,265
Readme
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 />
{: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.