@spectrum-web-components/search

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

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.