ComboBox component is a form element that allows the user to select one option from a list of options.
The default combobox is a select element with a label, placeholder, and description. The dap-ds-option-item elements should be placed inside the root component.
By default the combobox autocomplete the options.
Combobox field can have free text functionality. With this feature, the user can type in any text, not just the predefined options.
You have to listen for the dds-search event to get the input value.
ComboBox field can be used to fetch data from a remote server. For remote search and autocomplete use the dap-ds-search component.
JS
// Show the loading indicator
combobox.loading = true
fetch(`'https://dummyjson.com/todos'`)
.then(res => res.json())
.then(data => {
// Clear the previous options
combobox.innerHTML = ''
// Add the new options
data?.todos.forEach(item => {
const option = document.createElement('dap-ds-option-item')
option.value = item.id.toString()
option.appendChild(document.createTextNode(item.todo))
combobox.appendChild(option)
})
// Hide the loading indicator
combobox.loading = false
})
React
import { useEffect, useRef, useState } from 'react'
const Combobox = () => {
const [filterResult, setFilterResult] = useState<any[]>([])
const searchRef = useRef(null)
useEffect(() => {
if (searchRef.current) {
fetch('https://dummyjson.com/todos')
.then(res => res.json())
.then(data => {
setFilterResult(data.todos)
})
}
}, [])
return (
<dap-ds-combobox
label="Todos"
ref={searchRef}
sync
placeholder={'Add some todos for your happy life'}>
{filterResult?.map(item => (
<dap-ds-option-item
key={item.id}
value={item.id}
label={item.todo}>
{item.todo}
</dap-ds-option-item>
))}
</dap-ds-combobox>
)
}
export default Combobox
import { DapDSCombobox } from 'dap-design-system/dist/dds'
import { DapDSComboboxReact } from 'dap-design-system/dist/react'
| Property | Type | Default | Description |
|---|---|---|---|
value | string | The value of the select. | |
placeholder | string | The placeholder of the select. | |
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 select dropdown is opened. | |
sync | 'width', 'height' , 'both' | The sync mode of the select dropdown. How the dropdown item size is synced to the trigger element'. | |
label | string | The label of the select. | |
description | string | The description of the select. | |
tooltip | string | The tooltip of the select. | |
tooltipPlacement | 'top', 'right' , 'bottom' , 'left' | The tooltip placement of the input. | |
size | 'xs', 'sm' , 'sm' | The size of the select. Default is 'md'. | |
disabled | boolean | Whether the select is disabled. | |
required | boolean | Whether the select is required. | |
readonly | boolean | Whether the select is readonly. | |
autofocus | boolean | Whether the select is autofocus. | |
feedback | string | The feedback content of the select. | |
feedbackType | 'error', 'warning' , 'info' | The feedback type of the select. | |
searchMode | 'none', 'typehead' , 'autocomplete' , 'manual' | The search mode of the select. | |
openOnEmpty | boolean | Whether the combobox should open on empty results. | |
allowManualInput | boolean | Whether the combobox allows manual input, or free text. | |
searchForText | boolean | Whether the combobox should search for the selected item text. | |
noTextComplete | boolean | Whether the combobox should not complete the text. | |
searchButtonAriaLabel | string | The aria label of the search button. | |
selectable | string | Show the selected item check mark in the dropdown. 'true' or 'false' | |
noAnimation | boolean | Whether the combobox open indicator should be animated. |
| Name | Description |
|---|---|
(default) | The default slot for the options. |
| Event Name | Description | Type |
|---|---|---|
dds-change | Fired when the select value changes. | {value } |
dds-blur | Emitted when the select loses focus. | {void } |
dds-focus | Emitted when the select gains focus. | {void } |
dds-clear | Emitted when the select is cleared. | {void } |
dds-search | Emitted when the manual input value changes. | {search: string } |
dds-input | Emitted when typing happens in the input. | {input: string, originalEvent: Event } |
| Part Name | Description |
|---|---|
base | The main select container. |
trigger | The trigger button of the select. |
label | The label of the select. |
description | The description of the select. |
feedback | The feedback of the select. |
tooltip | The tooltip of the select. |
option-list | The option list of the select. |
| Property Name | Description |
|---|---|
--dds-combobox-background | The background color of the combobox. Defaults to var(--dds-fields-background-default). |
--dds-combobox-border-color | The border color of the combobox. Defaults to var(--dds-border-neutral-base). |
--dds-combobox-border-width | The border width of the combobox. Defaults to var(--dds-border-width-base, 1px). |
--dds-combobox-border-radius | The border radius of the combobox. Defaults to var(--dds-radius-base). |
--dds-combobox-text-color | The text color of the combobox. Defaults to var(--dds-text-neutral-base). |
--dds-combobox-placeholder-color | The placeholder text color. Defaults to var(--dds-text-neutral-subtle). |
--dds-combobox-disabled-background | The background color when disabled. Defaults to var(--dds-background-neutral-stronger). |
--dds-combobox-disabled-text | The text color when disabled. Defaults to var(--dds-text-neutral-disabled). |
--dds-combobox-error-border | The border color for error state. Defaults to var(--dds-border-negative-base). |
--dds-combobox-success-border | The border color for success state. Defaults to var(--dds-border-positive-base). |
--dds-combobox-icon-color | The color of the icons. Defaults to var(--dds-text-icon-neutral-subtle). |
--dds-combobox-clear-icon-color | The color of the clear icon. Defaults to var(--dds-button-subtle-icon-neutral-enabled). |
--dds-combobox-popup-background | The background color of the popup. Defaults to var(--dds-background-neutral-subtle). |
--dds-combobox-popup-shadow | The box shadow of the popup. Defaults to 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%). |
--dds-combobox-padding-xs | The padding for extra small size. Defaults to var(--dds-spacing-200). |
--dds-combobox-padding-sm | The padding for small size. Defaults to var(--dds-spacing-200). |
--dds-combobox-padding-lg | The padding for large size. Defaults to var(--dds-spacing-300). |
--dds-combobox-padding-horizontal | The horizontal padding. Defaults to var(--dds-spacing-300). |
--dds-combobox-padding-vertical | The vertical padding. Defaults to var(--dds-spacing-200). |
--dds-combobox-gap | The gap between elements. Defaults to var(--dds-spacing-100). |
--dds-combobox-icon-gap | The gap between icons. Defaults to var(--dds-spacing-200). |
--dds-combobox-action-gap | The gap between action elements. Defaults to var(--dds-spacing-200). |
--dds-combobox-action-padding | The padding for action elements. Defaults to var(--dds-spacing-300). |
--dds-combobox-clear-icon-width | The width of the clear icon. Defaults to var(--dds-spacing-800). |
--dds-combobox-dropdown-icon-right | The right position of the dropdown icon. Defaults to var(--dds-spacing-600). |
--dds-combobox-min-width | The minimum width of the combobox. Defaults to 7.5rem. |
