DÁP Design System - Combobox webcomponent

Combobox

ComboBox component is a form element that allows the user to select one option from a list of options.

Design system docs

Examples

Default combobox

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.

<dap-ds-combobox 
label="Fruits"
placeholder="Favorite fruit"
description="Select your favorite fruit"
>
<dap-ds-option-item value="alma">Apple</dap-ds-option-item>
<dap-ds-option-item value="korte">Pear</dap-ds-option-item>
<dap-ds-option-item value="szilva">Plum</dap-ds-option-item>
<dap-ds-option-item value="barack">Peach</dap-ds-option-item>
<dap-ds-option-item value="szolo">Grape</dap-ds-option-item>
<dap-ds-option-item value="meggy">Sour cherry</dap-ds-option-item>
<dap-ds-option-item value="cseresznye">Cherry</dap-ds-option-item>
</dap-ds-combobox>

Sizes

<dap-ds-stack>
<dap-ds-combobox 
label="Xs Fruits"
size="xs"
placeholder="Favorite fruit"
description="Select your favorite fruit"
feedback="This is a feedback message"
feedbacktype="negative"
>
<dap-ds-option-item value="alma">Apple</dap-ds-option-item>
<dap-ds-option-item value="korte">Pear</dap-ds-option-item>
<dap-ds-option-item value="szilva">Plum</dap-ds-option-item>
<dap-ds-option-item value="barack">Peach</dap-ds-option-item>
<dap-ds-option-item value="szolo">Grape</dap-ds-option-item>
<dap-ds-option-item value="meggy">Sour cherry</dap-ds-option-item>
<dap-ds-option-item value="cseresznye">Cherry</dap-ds-option-item>
</dap-ds-combobox>

<dap-ds-combobox 
label="Sm Fruits"
size="sm"
placeholder="Favorite fruit"
description="Select your favorite fruit"
feedback="This is a feedback message"
feedbacktype="negative"
>
<dap-ds-option-item value="alma">Apple</dap-ds-option-item>
<dap-ds-option-item value="korte">Pear</dap-ds-option-item>
<dap-ds-option-item value="szilva">Plum</dap-ds-option-item>
<dap-ds-option-item value="barack">Peach</dap-ds-option-item>
<dap-ds-option-item value="szolo">Grape</dap-ds-option-item>
<dap-ds-option-item value="meggy">Sour cherry</dap-ds-option-item>
<dap-ds-option-item value="cseresznye">Cherry</dap-ds-option-item>
</dap-ds-combobox>

<dap-ds-combobox 
label="Lg Fruits"
size="lg"
placeholder="Favorite fruit"
description="Select your favorite fruit"
feedback="This is a feedback message"
feedbacktype="negative"
>
<dap-ds-option-item value="alma">Apple</dap-ds-option-item>
<dap-ds-option-item value="korte">Pear</dap-ds-option-item>
<dap-ds-option-item value="szilva">Plum</dap-ds-option-item>
<dap-ds-option-item value="barack">Peach</dap-ds-option-item>
<dap-ds-option-item value="szolo">Grape</dap-ds-option-item>
<dap-ds-option-item value="meggy">Sour cherry</dap-ds-option-item>
<dap-ds-option-item value="cseresznye">Cherry</dap-ds-option-item>
</dap-ds-combobox>
</dap-ds-stack>

Combobox with manual input

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.

<dap-ds-combobox
allowManualInput
label="Fruits"
placeholder="Favorite fruit"
description="Select your favorite fruit"
>
<dap-ds-option-item value="alma">Apple</dap-ds-option-item>
<dap-ds-option-item value="korte">Pear</dap-ds-option-item>
<dap-ds-option-item value="szilva">Plum</dap-ds-option-item>
<dap-ds-option-item value="barack">Peach</dap-ds-option-item>
<dap-ds-option-item value="szolo">Grape</dap-ds-option-item>
<dap-ds-option-item value="meggy">Sour cherry</dap-ds-option-item>
<dap-ds-option-item value="cseresznye">Cherry</dap-ds-option-item>
</dap-ds-combobox>

Remote data

ComboBox field can be used to fetch data from a remote server. For remote search and autocomplete use the dap-ds-search component.

// 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

Importing

import { DapDSCombobox } from 'dap-design-system/dist/dds'

Importing React

import { DapDSComboboxReact } from 'dap-design-system/dist/react'

Attributes

Property	Type	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`	`boolean`	Show the selected item check mark in the dropdown.
`noAnimation`	`boolean`	Whether the combobox open indicator should be animated.

Slots

Name	Description
`(default)`	The default slot for the options.

Events

Event Name	Description
`dds-change`	Fired when the select value changes.
`dds-blur`	Emitted when the select loses focus.
`dds-focus`	Emitted when the select gains focus.
`dds-clear`	Emitted when the select is cleared.
`dds-search`	Emitted when the manual input value changes.
`dds-input`	Emitted when typing happens in the input.

CSS Parts

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.

CSS Custom Properties

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.