sp-search
NPM 1.6.0
View Storybook
Try it on webcomponents.dev
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 />
<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.
API
Attributes and Properties
action
action
string
''
autocomplete
autocomplete
| 'list' | 'none' | HTMLInputElement['autocomplete'] | HTMLTextAreaElement['autocomplete'] | undefined
disabled
disabled
boolean
false
grows
grows
boolean
false
holdValueOnEscape
holdValueOnEscape
boolean
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
tabIndex
tabIndex
number
valid
valid
boolean
false
value
value
string | number
Slots
help-text
negative-help-text
Events
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.
Changelog
Patch Changes
-
#5157 Thanks9e15a66
@TarunAdobe ! - # Release NoteInfield Button
Section titled Infield Button 6.1.2
Section titled 6.1.2 #3615 Thanksf09c84a
@Rajdeepc ! - ### Infield button fast follows- Updated infield button disabled border color to use
-spectrum-gray-300
for spectrum-two theme and-spectrum-gray-200
for other themes.
- Updated infield button disabled border color to use
6.1.1
Section titled 6.1.1 📝
#3536 Thanksf77aa72
@marissahuysentruyt !- S2 Foundations fixes
- Adjusts the background-color of the infield button components within stepper to use
gray-100
as opposed togray-25
.- This corresponds to the background-color updates picker has for S2.
- Corrects the border color for the default picker for S2 foundations, using
gray-500
(instead ofgray-800
) to align with other field/form components. - Refactors the
&.is-keyboardFocused&.is-placeholder
selector to&.is-keyboardFocused.spectrum-Picker-label.is-placeholder
to avoid unexpectedly targeting the nested placeholder class.
- Adjusts the background-color of the infield button components within stepper to use
6.1.0
Section titled 6.1.0 📝
#3541 Thanks1a3245c
@castastrophe !Dependency alignment across the project.
- Updated dependencies [
,205182b
]:1a3245c
- @spectrum-css/icon@9.1.0
- @spectrum-css/tokens@16.0.1
Number Field
Section titled Number Field Bump @spectrum-css/stepper to 7.1.3
7.1.3
Section titled 7.1.3 -
#3621 Thanks3aec28a
@marissahuysentruyt !- Updates
-spectrum-stepper-buttons-border-color-keyboard-focus
fromgray-900
togray-800
to match the rest of the border color on keyboardFocus.
- Updates
7.1.2
Section titled 7.1.2 📝
#3594 Thanks6200a63
@TarunAdobe !- Updates Stepper's key-focus border color (
-spectrum-stepper-border-color-keyboard-focus
) to-spectrum-gray-800
.
7.1.1
Section titled 7.1.1 📝
#3536 Thanksf77aa72
@marissahuysentruyt !- S2 Foundations fixes
- Adjusts the background-color of the infield button components within stepper to use
gray-100
as opposed togray-25
.- This corresponds to the background-color updates picker has for S2.
- Corrects the border color for the default picker for S2 foundations, using
gray-500
(instead ofgray-800
) to align with other field/form components. - Refactors the
&.is-keyboardFocused&.is-placeholder
selector to&.is-keyboardFocused.spectrum-Picker-label.is-placeholder
to avoid unexpectedly targeting the nested placeholder class.
- Adjusts the background-color of the infield button components within stepper to use
7.1.0
Section titled 7.1.0 📝
#3541 Thanks1a3245c
@castastrophe !Dependency alignment across the project.
- Updated dependencies [
,205182b
,9b108f7
]:1a3245c
- @spectrum-css/actionbutton@8.0.0
- @spectrum-css/icon@9.1.0
- @spectrum-css/infieldbutton@7.0.0
- @spectrum-css/textfield@9.0.0
- @spectrum-css/tokens@16.0.1
Textfield
Section titled Textfield 8.1.1
Section titled 8.1.1 📝
#3575 Thanks2e17d10
@TarunAdobe !- Updated border color on keyboard focus state for textfield in spectrum-two theme.
8.1.0
Section titled 8.1.0 📝
#3539 Thanks9b108f7
@rise-erpelding !- Updates invalid icon spacing to be vertically centered for S2.
📝
#3541 Thanks1a3245c
@castastrophe !- Dependency alignment across the project.
Set component peerDependencies as optional to reduce console warnings on downstream projects.
- Updated dependencies [
,205182b
]:1a3245c
- @spectrum-css/helptext@8.0.0
- @spectrum-css/tokens@16.0.1
Search
Section titled Search 8.1.2
Section titled 8.1.2 #3658 Thankse9fde67
@rise-erpelding ! - Change S2 theme border color to gray-800 on keyfocus per design request in order to align with text field.
8.1.1
Section titled 8.1.1 📝
#3593 Thanksd829abb
@TarunAdobe !Updated
--spectrum-search-background-color-disabled
to--spectrum-gray-25
and--spectrum-search-border-color-disabled
to--spectrum-gray-300
for the S2 foundations contexts.Also defines disabled quiet border and background colors (
--system-search-quiet-background-color-disabled
and--system-search-quiet-border-color-disabled
) in order to maintain disabled quiet styling.8.1.0
Section titled 8.1.0 📝
#3541 Thanks1a3245c
@castastrophe !Dependency alignment across the project.
- Updated dependencies [
,205182b
,9b108f7
]:1a3245c
- @spectrum-css/clearbutton@8.0.0
- @spectrum-css/icon@9.1.0
- @spectrum-css/textfield@9.0.0
- @spectrum-css/tokens@16.0.1
-
Updated dependencies [
,f6cebbd
,00eb0a8
]:9e15a66
- @spectrum-web-components/icons-workflow@1.6.0
- @spectrum-web-components/button@1.6.0
- @spectrum-web-components/textfield@1.6.0
- @spectrum-web-components/icon@1.6.0
- @spectrum-web-components/base@1.6.0
1.5.0
Patch Changes
- Updated dependencies [
]:4e06533
- @spectrum-web-components/button@1.5.0
- @spectrum-web-components/textfield@1.5.0
- @spectrum-web-components/icon@1.5.0
- @spectrum-web-components/icons-workflow@1.5.0
- @spectrum-web-components/base@1.5.0
1.4.0
Patch Changes
- Updated dependencies []:
- @spectrum-web-components/button@1.4.0
- @spectrum-web-components/icon@1.4.0
- @spectrum-web-components/icons-workflow@1.4.0
- @spectrum-web-components/textfield@1.4.0
- @spectrum-web-components/base@1.4.0
1.3.0
Patch Changes
- Updated dependencies []:
- @spectrum-web-components/button@1.3.0
- @spectrum-web-components/icon@1.3.0
- @spectrum-web-components/icons-workflow@1.3.0
- @spectrum-web-components/textfield@1.3.0
- @spectrum-web-components/base@1.3.0
All notable changes to this project will be documented in this file. See
1.2.0 (2025-02-27)
Note: Version bump only for package @spectrum-web-components/search
1.1.2 (2025-02-12)
Note: Version bump only for package @spectrum-web-components/search
1.1.1 (2025-01-29)
Note: Version bump only for package @spectrum-web-components/search
1.1.0 (2025-01-29)
Bug Fixes
- lock prerelease versions for Spectrum CSS (
#5014 ) (8aa7734 )
1.0.3 (2024-12-09)
Note: Version bump only for package @spectrum-web-components/search
1.0.1 (2024-11-11)
Bug Fixes
- search: clear button ui in express (
#4910 ) (f88e1e2 )
1.0.0 (2024-10-31)
Note: Version bump only for package @spectrum-web-components/search
0.49.0 (2024-10-15)
Note: Version bump only for package @spectrum-web-components/search
0.48.1 (2024-10-01)
Note: Version bump only for package @spectrum-web-components/search
0.48.0 (2024-09-17)
Note: Version bump only for package @spectrum-web-components/search
0.47.2 (2024-09-03)
Note: Version bump only for package @spectrum-web-components/search
0.47.1 (2024-08-27)
Note: Version bump only for package @spectrum-web-components/search
0.47.0 (2024-08-20)
Note: Version bump only for package @spectrum-web-components/search
0.46.0 (2024-08-08)
Note: Version bump only for package @spectrum-web-components/search
0.45.0 (2024-07-30)
Note: Version bump only for package @spectrum-web-components/search
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 )