sp-search

NPM

0.42.2

Spectrum

View guidelines

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API

Attributes and Properties #

Property Attribute Type Default Description action action string '' autocomplete autocomplete | HTMLInputElement['autocomplete'] | HTMLTextAreaElement['autocomplete'] | undefined What form of assistance should be provided when attempting to supply a value to the form control disabled disabled boolean false Disable this control. It will not receive focus or events grows grows boolean false Whether a form control delivered with the `multiline` attribute will change size vertically to accomodate longer input invalid invalid boolean false Whether the `value` held by the form control is invalid. label label string 'Search' A string applied via `aria-label` to the form control when a user visible label is not provided. maxlength maxlength number -1 Defines the maximum string length that the user can enter method method 'get' | 'post' | 'dialog' | undefined minlength minlength number -1 Defines the minimum string length that the user can enter multiline multiline boolean false Whether the form control should accept a value longer than one line name name string | undefined Name of the form control. pattern pattern string | undefined Pattern the `value` must match to be valid placeholder placeholder string 'Search' Text that appears in the form control when it has no value set quiet quiet boolean false Whether to display the form control with no visible background readonly readonly boolean false Whether a user can interact with the value of the form control required required boolean false Whether the form control will be found to be invalid when it holds no `value` rows rows number -1 The specific number of rows the form control should provide in the user interface tabIndex tabIndex number The tab index to apply to this control. See general documentation about the tabindex HTML property valid valid boolean false Whether the `value` held by the form control is valid. value value string | number The value held by the form control

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.