Search component is a form element that allows the user to search for a specific item.
The default search field is basically a text input field with a search icon. It fires the dds-search event when the user hits the enter key or clicks on the search icon.
The search field can be set to subtle mode. In this mode, the search icon has subtle color schema.
Search field can have autocomplete functionality. It can be used to suggest search terms to the user. Like any other 'select' component, the dap-ds-option-item elements should be placed inside the root component.
You can listen to the dds-input event to fetch the data from the server, and you can use the dds-change event to get the selected value.
Search field can have free text functionality. With this feature, the user can type in any text, not just the predefined options.
With the searchForText attribute, the search field can be set to search for the selected item text instead of the value.
Search field can be used to search for remote data. The dds-input event should be listened to and the data should be fetched from the server.
autocomplete.addEventListener('dds-input', event => {
console.log(event.detail)
// Show the loading indicator
autocomplete.loading = true
fetch(`https://dummyjson.com/products/search?q=${event.detail.input}`)
.then(res => res.json())
.then(data => {
// Clear the previous options
autocomplete.innerHTML = ''
// Add the new options
data?.products.forEach(item => {
const option = document.createElement('dap-ds-option-item')
option.value = item.id.toString()
option.appendChild(document.createTextNode(item.title))
autocomplete.appendChild(option)
})
// Hide the loading indicator
autocomplete.loading = false
})
})
import { DapDSSearch } from 'dap-design-system'
import { DapDSSearchReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSSearch } from 'dap-design-system/components'
| Property | Type | Default | Description |
|---|---|---|---|
selectable | string | 'false' | Show the selected item check mark in the dropdown. Default is 'false'. |
search | boolean | true | |
noAnimation | boolean | true | Whether the search open indicator should be animated. Default is true. |
searchOnValueSet | string | 'false' | |
searchMode | 'none', 'typehead' , 'autocomplete' , 'manual' | 'none' | The search mode of the select. Default is 'none'. |
textComplete | boolean | false | Whether the search should not complete the text. |
value | string | The value of the search. | |
placeholder | string | The placeholder of the search. | |
placement | 'top', 'top-start' , 'top-end' , 'right' , 'right-start', 'right-end' , 'bottom' , 'bottom-start' , 'bottom-end' , 'left' , 'left-start' , 'left-end' | The placement of the select dropdown. Default is 'bottom-start'. | |
opened | boolean | Whether the search dropdown is opened. | |
sync | boolean | The sync mode of the search dropdown. How the dropdown item size is synced to the trigger element'. | |
label | string | The label of the search. | |
description | string | The description of the search. | |
tooltip | string | The tooltip of the search. | |
size | 'xs', 'sm' , 'lg' | The size of the search. | |
disabled | boolean | Whether the search is disabled. | |
required | boolean | Whether the search is required. | |
readonly | boolean | Whether the search is readonly. | |
autofocus | boolean | Whether the search is autofocus. | |
clearButton | string | Whether the search is clearable. Default is 'true'. | |
feedback | string | The feedback content of the search. | |
feedbackType | 'negative', 'positive' , 'warning' , 'info' | The feedback type of the search. | |
allowManualInput | boolean | Whether the search allows manual input, or free text. | |
searchForText | boolean | Whether the search should search for the selected item text. | |
searchButtonAriaLabel | string | The aria label of the search button. | |
openOnEmpty | boolean | Whether the search should open on empty results. | |
subtle | boolean | Subtle color version |
| Name | Description |
|---|---|
(default) | The default slot for the options. |
| Event Name | Description | Type |
|---|---|---|
dds-change | Fired when the search value changes. | void |
dds-blur | Emitted when the search loses focus. | void |
dds-focus | Emitted when the search gains focus. | void |
dds-clear | Emitted when the search is cleared. | void |
dds-search | Emitted when the search input value changes. | void |
dds-input | Emitted when typing happens in the search input. | void |
| Part Name | Description |
|---|---|
base | The main search container. |
trigger | The trigger button of the search. |
label | The label of the search. |
description | The description of the search. |
feedback | The feedback of the search. |
tooltip | The tooltip of the search. |
option-list | The option list of the search. |
input | The input of the search. |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-search::part(base) {
/* Your custom styles */
}
/* Target multiple parts */
.my-custom-dap-ds-search::part(base),
.my-custom-dap-ds-search::part(trigger) {
/* Shared styles */
}
Example usage:
<dap-ds-search class="my-custom-dap-ds-search">
Search
</dap-ds-search>
.my-custom-dap-ds-search::part(base) {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
| Property Name | Description |
|---|---|
--dds-combobox-background | The background color of the combobox. (default: var(--dds-fields-background-default)) |
--dds-combobox-border-color | The border color of the combobox. (default: var(--dds-border-neutral-base)) |
--dds-combobox-border-width | The border width of the combobox. (default: var(--dds-border-width-base, 1px)) |
--dds-combobox-border-radius | The border radius of the combobox. (default: var(--dds-radius-base)) |
--dds-combobox-text-color | The text color of the combobox. (default: var(--dds-text-neutral-base)) |
--dds-combobox-placeholder-color | The placeholder text color. (default: var(--dds-text-neutral-subtle)) |
--dds-combobox-disabled-background | The background color when disabled. (default: var(--dds-background-neutral-stronger)) |
--dds-combobox-disabled-text | The text color when disabled. (default: var(--dds-text-neutral-disabled)) |
--dds-combobox-error-border | The border color for error state. (default: var(--dds-border-negative-base)) |
--dds-combobox-success-border | The border color for success state. (default: var(--dds-border-positive-base)) |
--dds-combobox-icon-color | The color of the icons. (default: var(--dds-text-icon-neutral-subtle)) |
--dds-combobox-clear-icon-color | The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled)) |
--dds-combobox-popup-background | The background color of the popup. (default: var(--dds-background-neutral-subtle)) |
--dds-combobox-popup-shadow | The box shadow of the popup. (default: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06)) |
--dds-combobox-icon-opened-transform | The transform of the icon when the combobox is opened (default: rotate(90deg)). |
--dds-combobox-padding-xs | The padding for extra small size. (default: var(--dds-spacing-200)) |
--dds-combobox-padding-sm | The padding for small size. (default: var(--dds-spacing-200)) |
--dds-combobox-padding-lg | The padding for large size. (default: var(--dds-spacing-300)) |
--dds-combobox-padding-horizontal | The horizontal padding. (default: var(--dds-spacing-300)) |
--dds-combobox-padding-vertical | The vertical padding. (default: var(--dds-spacing-200)) |
--dds-combobox-gap | The gap between elements. (default: var(--dds-spacing-100)) |
--dds-combobox-icon-gap | The gap between icons. (default: var(--dds-spacing-200)) |
--dds-combobox-action-gap | The gap between action elements. (default: var(--dds-spacing-200)) |
--dds-combobox-action-padding | The padding for action elements. (default: var(--dds-spacing-300)) |
--dds-combobox-clear-icon-width | The width of the clear icon. (default: var(--dds-spacing-800)) |
--dds-combobox-dropdown-icon-right | The right position of the dropdown icon. (default: var(--dds-spacing-600)) |
--dds-combobox-min-width | The minimum width of the combobox. (default: 7.5rem) |
--dds-combobox-chips-gap | The gap between chips. (default: var(--dds-spacing-100)) |
--dds-combobox-chips-padding | The padding for chips. (default: var(--dds-spacing-100)) |
--dds-combobox-chips-max-height | The maximum height of the chips. (default: 120px) |
CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:
Method 1: Inline styles (Quick customization)
<dap-ds-search
style="--dds-combobox-background: value; --dds-combobox-border-color: value;">
Search
</dap-ds-search>
Method 2: CSS classes (Reusable styles)
.my-custom-dap-ds-search {
--dds-combobox-background: value;
--dds-combobox-border-color: value;
--dds-combobox-border-width: value;
}
<dap-ds-search class="my-custom-dap-ds-search">
Search
</dap-ds-search>
Method 3: Global theme customization
/* Apply to all instances */
dap-ds-search {
--dds-combobox-background: value;
--dds-combobox-border-color: value;
}
CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.
