sp-search

NPM

0.44.0

Storybook

View Storybook

Try it on

webcomponents.dev

Examples

API

Changelog

Attributes and Properties #

Property

Attribute

Type

Default

Description

action

string

''

autocomplete

What form of assistance should be provided when attempting to supply a value to the form control

disabled

boolean

false

Disable this control. It will not receive focus or events

grows

boolean

false

Whether a form control delivered with the `multiline` attribute will change size vertically to accomodate longer input

holdValueOnEscape

boolean

invalid

boolean

false

Whether the `value` held by the form control is invalid.

label

string

'Search'

A string applied via `aria-label` to the form control when a user visible label is not provided.

maxlength

number

-1

Defines the maximum string length that the user can enter

method

'get' | 'post' | 'dialog' | undefined

minlength

number

-1

Defines the minimum string length that the user can enter

multiline

boolean

false

Whether the form control should accept a value longer than one line

name

string | undefined

Name of the form control.

pattern

string | undefined

Pattern the `value` must match to be valid

placeholder

string

'Search'

Text that appears in the form control when it has no value set

quiet

boolean

false

Whether to display the form control with no visible background

readonly

boolean

false

Whether a user can interact with the value of the form control

required

boolean

false

Whether the form control will be found to be invalid when it holds no `value`

rows

number

-1

The specific number of rows the form control should provide in the user interface

tabIndex

number

The tab index to apply to this control. See general documentation about the tabindex HTML property

valid

boolean

false

Whether the `value` held by the form control is valid.

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.

0.44.0 (2024-07-15) #

Note: Version bump only for package @spectrum-web-components/search

0.43.0 (2024-06-11) #

Note: Version bump only for package @spectrum-web-components/search

0.42.5 (2024-05-24) #

Note: Version bump only for package @spectrum-web-components/search

0.42.4 (2024-05-14) #

Note: Version bump only for package @spectrum-web-components/search

0.42.3 (2024-05-01) #

Note: Version bump only for package @spectrum-web-components/search

0.42.2 (2024-04-03) #

Note: Version bump only for package @spectrum-web-components/search

0.42.1 (2024-04-02) #

Note: Version bump only for package @spectrum-web-components/search

0.42.0 (2024-03-19) #

Features #

asset: use core tokens (99e76f4)

0.41.2 (2024-03-05) #

Note: Version bump only for package @spectrum-web-components/search

0.41.1 (2024-02-22) #

Note: Version bump only for package @spectrum-web-components/search

0.41.0 (2024-02-13) #

Features #

icon: use core tokens (a11ef6b)

0.40.5 (2024-02-05) #

Note: Version bump only for package @spectrum-web-components/search

0.40.4 (2024-01-29) #

Note: Version bump only for package @spectrum-web-components/search

0.40.3 (2024-01-11) #

Note: Version bump only for package @spectrum-web-components/search

0.40.2 (2023-12-18) #

Note: Version bump only for package @spectrum-web-components/search

0.40.1 (2023-12-05) #

Note: Version bump only for package @spectrum-web-components/search

0.40.0 (2023-11-16) #

Note: Version bump only for package @spectrum-web-components/search

0.39.4 (2023-11-02) #

Note: Version bump only for package @spectrum-web-components/search

0.39.3 (2023-10-18) #

Note: Version bump only for package @spectrum-web-components/search

0.39.2 (2023-10-13) #

Note: Version bump only for package @spectrum-web-components/search

0.39.1 (2023-10-06) #

Note: Version bump only for package @spectrum-web-components/search

0.39.0 (2023-09-25) #

Note: Version bump only for package @spectrum-web-components/search

0.38.0 (2023-09-05) #

Bug Fixes #

search: add mod to remove clear button padding (65168fe)

0.37.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/search

0.36.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/search

0.35.0 (2023-07-31) #

Note: Version bump only for package @spectrum-web-components/search

0.34.0 (2023-07-11) #

Bug Fixes #

number-field,search,textfield: add t-shirt sizes (fda8f96)

0.33.2 (2023-06-14) #

Note: Version bump only for package @spectrum-web-components/search

0.33.0 (2023-06-08) #

Features #

search: use core tokens (c62a7cd)

0.32.0 (2023-06-01) #

Features #

search,textfield: use core tokens (2ed5135)

0.31.0 (2023-05-17) #

Note: Version bump only for package @spectrum-web-components/search

0.30.0 (2023-05-03) #

Bug Fixes #

add tslib as dependency where needed (78885d9)
apply "HelpTextMixin" to form elements (a952447)
correct @element jsDoc listing across library (c97a632)
ensure browser understandable extensions (f4e59f7)
ensure CCX search visual delivery (22b90b9)
include "type" in package.json, generate custom-elements.json (1a8d716)
include default export in the "exports" fields (f32407d)
include the "types" entry in package.json files (b432f59)
normalize "event" and "error" argument names (8d382cd)
search: ensure "reset" surfaces "input" and "change" events (d8204a9)
search: prevent overflow content from going behind clear button (956f947)
update latest Spectrum CSS beta releases (d8d3acc)
update side effect listings (8160d3a)
update to latest spectrum-css packages (a5ca19f)
use icons without "size" values (3fc7c91)
use latest @spectrum-css/* versions (c35eb86)
use type="search" for nicer virtual keyboards (c439eb3)

Features #

action-button: add action button pattern (03ac00a)
add and use icons-ui package (d9c3ab2)
adopt DNA@7 base Spectrum CSS (e08cafd)
button: use synthetic button instead of native (49e94bc)
conditionally load focus-visible polyfill (6b5e5cf)
icons-workflow: vend fully registered icon components (941f3a4)
include all Dev Mode files in side effects (f70817c)
leverage "exports" field in package.json (321abd7)
search: adds sp-search element (d484fc2)
search: introduce API to control form interactions (42fac00)
search: submit will bubble (8014345)
search: support "quiet" variant (d0f85f1)
search: update spectrum css input (05d8131)
search: use Spectrum CSS ^3.0.0 (7830ac0)
shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
use @adobe/spectrum-css@2.15.1 (3918888)
use latest exports specification (a7ecf4b)

Performance Improvements #

use "sideEffects" listing in package.json (7271614)

Reverts #

Revert "chore: release new versions" (a6d655d)

0.12.16 (2023-04-24) #

Note: Version bump only for package @spectrum-web-components/search

0.12.15 (2023-04-05) #

Note: Version bump only for package @spectrum-web-components/search

0.12.14 (2023-03-22) #

Note: Version bump only for package @spectrum-web-components/search

0.12.13 (2023-03-08) #

Note: Version bump only for package @spectrum-web-components/search

0.12.12 (2023-02-13) #

Note: Version bump only for package @spectrum-web-components/search

0.12.11 (2023-02-08) #

Note: Version bump only for package @spectrum-web-components/search

0.12.10 (2023-01-23) #

Note: Version bump only for package @spectrum-web-components/search

0.12.9 (2023-01-09) #

Note: Version bump only for package @spectrum-web-components/search

0.12.8 (2022-12-08) #

Note: Version bump only for package @spectrum-web-components/search

0.12.7 (2022-11-21) #

Note: Version bump only for package @spectrum-web-components/search

0.12.6 (2022-11-14) #

Note: Version bump only for package @spectrum-web-components/search

0.12.5 (2022-10-28) #

Note: Version bump only for package @spectrum-web-components/search

0.12.4 (2022-10-17) #

Note: Version bump only for package @spectrum-web-components/search

0.12.3 (2022-10-10) #

Bug Fixes #

search: prevent overflow content from going behind clear button (956f947)

0.12.2 (2022-09-14) #

Note: Version bump only for package @spectrum-web-components/search

0.12.1 (2022-08-24) #

Note: Version bump only for package @spectrum-web-components/search

0.12.0 (2022-08-09) #

Features #

include all Dev Mode files in side effects (f70817c)

0.11.6 (2022-08-04) #

Note: Version bump only for package @spectrum-web-components/search

0.11.5 (2022-07-18) #

Note: Version bump only for package @spectrum-web-components/search

0.11.4 (2022-06-29) #

Note: Version bump only for package @spectrum-web-components/search

0.11.3 (2022-06-07) #

Note: Version bump only for package @spectrum-web-components/search

0.11.2 (2022-05-27) #

Note: Version bump only for package @spectrum-web-components/search

0.11.1 (2022-05-12) #

Note: Version bump only for package @spectrum-web-components/search

0.11.0 (2022-04-21) #

Bug Fixes #

ensure CCX search visual delivery (22b90b9)

Features #

conditionally load focus-visible polyfill (6b5e5cf)

0.10.7 (2022-03-30) #

Note: Version bump only for package @spectrum-web-components/search

0.10.6 (2022-03-08) #

Note: Version bump only for package @spectrum-web-components/search

0.10.5 (2022-03-04) #

Note: Version bump only for package @spectrum-web-components/search

0.10.4 (2022-02-22) #

Note: Version bump only for package @spectrum-web-components/search

0.10.3 (2022-01-26) #

Note: Version bump only for package @spectrum-web-components/search

0.10.2 (2022-01-07) #

Note: Version bump only for package @spectrum-web-components/search

0.10.1 (2021-12-13) #

Bug Fixes #

apply "HelpTextMixin" to form elements (a952447)

0.10.0 (2021-11-08) #

Note: Version bump only for package @spectrum-web-components/search

0.9.1 (2021-11-08) #

Note: Version bump only for package @spectrum-web-components/search

0.9.0 (2021-11-02) #

Features #

adopt DNA@7 base Spectrum CSS (e08cafd)

0.8.18 (2021-10-12) #

Note: Version bump only for package @spectrum-web-components/search

0.8.17 (2021-10-05) #

Bug Fixes #

use type="search" for nicer virtual keyboards (c439eb3)

0.8.16 (2021-09-20) #

Note: Version bump only for package @spectrum-web-components/search

0.8.15 (2021-09-13) #

Note: Version bump only for package @spectrum-web-components/search

0.8.14 (2021-08-24) #

Bug Fixes #

correct @element jsDoc listing across library (c97a632)

0.8.13 (2021-08-03) #

Note: Version bump only for package @spectrum-web-components/search

0.8.12 (2021-07-22) #

Note: Version bump only for package @spectrum-web-components/search

0.8.11 (2021-07-01) #

Note: Version bump only for package @spectrum-web-components/search

0.8.10 (2021-06-16) #

Note: Version bump only for package @spectrum-web-components/search

0.8.9 (2021-06-07) #

Note: Version bump only for package @spectrum-web-components/search

0.8.8 (2021-05-24) #

Note: Version bump only for package @spectrum-web-components/search

0.8.7 (2021-05-12) #

Note: Version bump only for package @spectrum-web-components/search

0.8.6 (2021-04-15) #

Note: Version bump only for package @spectrum-web-components/search

0.8.5 (2021-04-09) #

Note: Version bump only for package @spectrum-web-components/search

0.8.4 (2021-03-29) #

Note: Version bump only for package @spectrum-web-components/search

0.8.3 (2021-03-22) #

Note: Version bump only for package @spectrum-web-components/search

0.8.2 (2021-03-22) #

Note: Version bump only for package @spectrum-web-components/search

0.8.1 (2021-03-05) #

Note: Version bump only for package @spectrum-web-components/search

0.8.0 (2021-03-04) #

Features #

use latest exports specification (a7ecf4b)

0.7.3 (2021-02-11) #

Bug Fixes #

update to latest spectrum-css packages (a5ca19f)

0.7.2 (2021-02-02) #

Note: Version bump only for package @spectrum-web-components/search

0.7.1 (2021-01-28) #

Note: Version bump only for package @spectrum-web-components/search

0.7.0 (2021-01-21) #

Bug Fixes #

include the "types" entry in package.json files (b432f59)
update latest Spectrum CSS beta releases (d8d3acc)
use icons without "size" values (3fc7c91)
use latest @spectrum-css/* versions (c35eb86)

Features #

action-button: add action button pattern (03ac00a)
button: use synthetic button instead of native (49e94bc)
icons-workflow: vend fully registered icon components (941f3a4)
search: update spectrum css input (05d8131)

0.6.0 (2021-01-13) #

Bug Fixes #

include the "types" entry in package.json files (b432f59)
update latest Spectrum CSS beta releases (d8d3acc)
use icons without "size" values (3fc7c91)
use latest @spectrum-css/* versions (c35eb86)

Features #

action-button: add action button pattern (03ac00a)
button: use synthetic button instead of native (49e94bc)
icons-workflow: vend fully registered icon components (941f3a4)
search: update spectrum css input (05d8131)

0.5.4 (2020-10-12) #

Note: Version bump only for package @spectrum-web-components/search

0.5.3 (2020-10-12) #

Bug Fixes #

include default export in the "exports" fields (f32407d)

0.5.2 (2020-09-25) #

Bug Fixes #

update side effect listings (8160d3a)

0.5.1 (2020-09-14) #

Note: Version bump only for package @spectrum-web-components/search

0.5.0 (2020-08-31) #

Features #

search: use Spectrum CSS ^3.0.0 (7830ac0)

0.4.4 (2020-08-19) #

Note: Version bump only for package @spectrum-web-components/search

0.4.3 (2020-07-27) #

Note: Version bump only for package @spectrum-web-components/search

0.4.2 (2020-07-24) #

Bug Fixes #

ensure browser understandable extensions (f4e59f7)

0.4.1 (2020-07-22) #

Note: Version bump only for package @spectrum-web-components/search

0.4.0 (2020-07-17) #

Features #

leverage "exports" field in package.json (321abd7)

0.3.4 (2020-06-08) #

Note: Version bump only for package @spectrum-web-components/search

0.3.3 (2020-05-12) #

Note: Version bump only for package @spectrum-web-components/search

0.3.2 (2020-05-08) #

Note: Version bump only for package @spectrum-web-components/search

0.3.1 (2020-04-21) #

Note: Version bump only for package @spectrum-web-components/search

0.3.0 (2020-04-16) #

Features #

add and use icons-ui package (d9c3ab2)

Performance Improvements #

use "sideEffects" listing in package.json (7271614)

0.2.12 (2020-04-10) #

Note: Version bump only for package @spectrum-web-components/search

0.2.11 (2020-04-07) #

Note: Version bump only for package @spectrum-web-components/search

0.2.10 (2020-03-25) #

Note: Version bump only for package @spectrum-web-components/search

0.2.9 (2020-03-11) #

Bug Fixes #

search: ensure "reset" surfaces "input" and "change" events (d8204a9)

0.2.8 (2020-02-05) #

Note: Version bump only for package @spectrum-web-components/search

0.2.7 (2020-02-01) #

Note: Version bump only for package @spectrum-web-components/search

0.2.6 (2020-01-30) #

Note: Version bump only for package @spectrum-web-components/search

0.2.5 (2020-01-06) #

Note: Version bump only for package @spectrum-web-components/search

0.2.4 (2019-12-12) #

Note: Version bump only for package @spectrum-web-components/search

0.2.3 (2019-12-09) #

Note: Version bump only for package @spectrum-web-components/search

0.2.2 (2019-12-02) #

Bug Fixes #

normalize "event" and "error" argument names (8d382cd)

0.2.1 (2019-11-27) #

Bug Fixes #

include "type" in package.json, generate custom-elements.json (1a8d716)

0.2.0 (2019-11-19) #

Features #

use @adobe/spectrum-css@2.15.1 (3918888)

0.1.3 (2019-11-01) #

Note: Version bump only for package @spectrum-web-components/search

0.1.2 (2019-10-16) #

Bug Fixes #

add tslib as dependency where needed (78885d9)

0.1.1 (2019-10-16) #

Note: Version bump only for package @spectrum-web-components/search

0.1.0 (2019-10-14) #

Features #

search: adds sp-search element (d484fc2)
search: introduce API to control form interactions (42fac00)
search: submit will bubble (8014345)
search: support "quiet" variant (d0f85f1)

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.

Properties #

holdValueOnEscape #

Type: boolean
Default: false

If holdValueOnEscape controls whether the typed value should be held (i.e., not cleared or reset) when the Escape key is pressed. If set to true, pressing the Escape key will not affect the value in the search field.

Spectrum Web Components

sp-search

NPM

0.44.0

Storybook

View Storybook

Try it on

webcomponents.dev

Attributes and Properties #

Slots #

Events #

0.44.0 (2024-07-15) #

0.43.0 (2024-06-11) #

0.42.5 (2024-05-24) #

0.42.4 (2024-05-14) #

0.42.3 (2024-05-01) #

0.42.2 (2024-04-03) #

0.42.1 (2024-04-02) #

0.42.0 (2024-03-19) #

Features #

0.41.2 (2024-03-05) #

0.41.1 (2024-02-22) #

0.41.0 (2024-02-13) #

Features #

0.40.5 (2024-02-05) #

0.40.4 (2024-01-29) #

0.40.3 (2024-01-11) #

0.40.2 (2023-12-18) #

0.40.1 (2023-12-05) #

0.40.0 (2023-11-16) #

0.39.4 (2023-11-02) #

0.39.3 (2023-10-18) #

0.39.2 (2023-10-13) #

0.39.1 (2023-10-06) #

0.39.0 (2023-09-25) #

0.38.0 (2023-09-05) #

Bug Fixes #

0.37.0 (2023-08-18) #

0.36.0 (2023-08-18) #

0.35.0 (2023-07-31) #

0.34.0 (2023-07-11) #

Bug Fixes #

0.33.2 (2023-06-14) #

0.33.0 (2023-06-08) #

Features #

0.32.0 (2023-06-01) #

Features #

0.31.0 (2023-05-17) #

0.30.0 (2023-05-03) #

Bug Fixes #

Features #

Performance Improvements #

Reverts #

0.12.16 (2023-04-24) #

0.12.15 (2023-04-05) #

0.12.14 (2023-03-22) #

0.12.13 (2023-03-08) #

0.12.12 (2023-02-13) #

0.12.11 (2023-02-08) #

0.12.10 (2023-01-23) #

0.12.9 (2023-01-09) #

0.12.8 (2022-12-08) #

0.12.7 (2022-11-21) #

0.12.6 (2022-11-14) #

0.12.5 (2022-10-28) #

0.12.4 (2022-10-17) #

0.12.3 (2022-10-10) #

Bug Fixes #

0.12.2 (2022-09-14) #

0.12.1 (2022-08-24) #

0.12.0 (2022-08-09) #

Features #

0.11.6 (2022-08-04) #

0.11.5 (2022-07-18) #

0.11.4 (2022-06-29) #

0.11.3 (2022-06-07) #

0.11.2 (2022-05-27) #

0.11.1 (2022-05-12) #

0.11.0 (2022-04-21) #

Bug Fixes #

Spectrum
Web Components