Dropdown

Easily drop your things down.

Example

Props

🕹️ standard props
items
Item[]
List of items to be displayed in the autocomplete menu.
[]
values
Item[]
List of selected items.
$bindable([])
multiple
boolean
If true, multiple items can be selected.
false
lang
'it' | 'en'
Language of the autocomplete placeholder text.
'en'
searchText
string
The search text entered in the input field.
$bindable()
maxVisibleChips
number
Maximum number of chips to display.
undefined
placeholder
string
Placeholder text for the input field.
lang === 'en' ? 'Select' : 'Seleziona'
clearable
boolean
If true, a clear button is displayed to clear the selected items.
true
mandatory
boolean
If true, the field is mandatory to select.
true
icon
string
The name of the icon to display in the label.
undefined
menuOpened
boolean
If true, the autocomplete menu is open.
$bindable(false)
openingId
string
The unique identifier for the autocomplete menu.
$bindable('autocomplete-menu')
width
string
Width of the autocomplete input field.
undefined
height
string
Height of the autocomplete input field.
undefined
minWidth
string
Minimum width of the autocomplete input field.
undefined
menuWidth
string
Width of the autocomplete menu.
width
mobileDrawer
boolean
If true, the menu is displayed as a mobile drawer.
false
disabled
boolean
If true, the autocomplete is disabled.
false
🎨 style props
No data available

Slots

itemLabelSnippet

Renders the label of an item.

Default content:

{item.label}

Available variables:

Name	Type	Description
item	ItemData	The item to render the label for.

labelSnippet

Snippet for customizing the label of the button element in the autocomplete.

Default content:

<div class="label">
  {#if !!icon}
    <Icon name={icon}></Icon>
  {/if}
  {#if values.length == 0}
    <div class="space-between">
      <div>{placeholder}</div>
      <Icon name="mdi-chevron-down"></Icon>
    </div>
  {:else}
    <div class="space-between">
      <div>{generatedLabel}</div>
      {#if clearable}
        <Icon
          name="mdi-close"
          onclick={handleCloseClick}
        ></Icon>
      {/if}
    </div>
  {/if}
</div>
      

Available variables:

Name	Type	Description
values	Item[]	The selected items.
items	Item[]	The list of available items.
searchText	string	The current search text.
generatedLabel	string	The generated label based on selected items.
placeholder	string	The placeholder text for the input.
clearable	boolean	If true, a clear button is displayed.
handleCloseClick	function	Function triggered when the clear button is clicked.

Events

onchange

Triggered when the selected items change.

Attribute	Type	Description
unselect	Item | undefined	The item that was unselected.
select	Item | undefined	The item that was selected.
selection	Item[]	The list of currently selected items.