Dropdown select

Component

Props

Usage

id

Sets an id for the component.

 <template>
    <DropdownSelect
        id=""
    />
</template>
 

• Type: string

options

Sets the options for the component.

You can add non-interactive section headers by setting sectionTitle: true on an option.

 <template>
    <DropdownSelect
        :options="exampleOptions"
    />
</template>

<script setup lang="ts">
const exampleOptions = ref<SelectOption[]>([
    {
        sectionTitle: true,
        text: "Basic options",
        value: "section-basic",
        icon: "mdi:shape-outline",
    },
    {
        text: "Item 1",
        value: "item-1",
    },
    {
        text: "Item 2",
        value: "item-2",
    },
    {
        text: "Item 3",
        value: "item-3",
    },
])
</script>
 

• Type: SelectOption[]
• Default: 'An example array'

TypeScript interface

 interface SelectOption {
    id?: string | number
    value: string | number
    sectionTitle?: boolean
    text?: string
    icon?: string
    userDisplayName?: string
    userProfileImg?: string
    imgUrl?: string
    alt?: string
    helpText?: string
    to?: string
    isExternal?: boolean
    disabled?: boolean
}
 

placeholder

Sets the placeholder text for the select. This text appears when no option is selected.

 <template>
    <DropdownSelect
        placeholder="Select an option"
    />
</template>
 

• Type: string
• Default: 'Select an option'

type

Sets the type of the select. Uses the SelectType enum.

 <template>
    <DropdownSelect
        type="SelectType.TEXT"
    />
</template>
 

• Type: SelectType
• Default: SelectType.TEXT

Options

size

Sets the size of the select. Uses the SelectSize enum.

 <template>
    <DropdownSelect
        size="SelectSize.LG"
    />
</template>
 

• Type: SelectSize
• Default: SelectSize.MD

Options

activeStyle

Sets the active style of the select. Uses the SelectActiveStyle enum.

 <template>
    <DropdownSelect
        activeStyle="SelectActiveStyle.FILL"
    />
</template>
 

• Type: SelectActiveStyle
• Default: SelectActiveStyle.CHECK

Options

modelValue

Sets the model value of the select.

 <template>
    <DropdownSelect
        :modelValue="selectedValue"
    />
</template>

<script setup lang="ts">
const selectedValue = ref("item-1")
</script>
 

• Type: string | number | (string | number)[] | null
• Default: null

dropdownPosition

Sets the position of the dropdown. It is usefull to avoid dropdown menu overflow when reaching the container limit. Uses the DropdownPosition enum

 <template>
    <DropdownSelect
        dropdownPosition="DropdownPosition.TOP"
    />
</template>
 

• Type: DropdownPosition
• Default: DropdownPosition.BOTTOM

Options

selectBoxClass

Sets the class of the select box. Customizes and overrides the select box styles.

 <template>
    <DropdownSelect
        selectBoxClass="bg-background-container-surface"
    />
</template>
 

• Type: string

filterable

Enables or disables filterable dropdown items. Those items can be filtered using a search field that appear on top of the list items.

 <template>
    <DropdownSelect
        filterable
    />
</template>
 

• Type: boolean
• Default: false

searchFieldPlaceholder

Sets the placeholder text for the filtered DropdownSelect search field. It requires the prop filterable to be true helpful.

 <template>
    <DropdownSelect
        filterable
        searchFieldPlaceholder="Search..."
    />
</template>
 

• Type: string
• Default: 'Search...'

noResultsFoundText

Sets the text to display when there are no results found while filtering. It requires the prop filterable to be true helpful.

 <template>
    <DropdownSelect
        filterable
        noResultsFoundText="No results found"
    />
</template>
 

• Type: string
• Default: 'No results found'

disabled

Enables or disables the select.

 <template>
    <DropdownSelect
        disabled
    />
</template>
 

• Type: boolean
• Default: false

hasSeparator

Shows or hides the separator between the dropdown menu items.

 <template>
    <DropdownSelect
        hasSeparator
    />
</template>
 

• Type: boolean
• Default: false

multiple

Allows multiple selection of items. This requires the modelValue to be an array.

 <template>
    <DropdownSelect
        multiple
    />
</template>
 

• Type: boolean
• Default: false

allowDeselect

Allows the user to deselect items. Can be used with single and multiple selections.

 <template>
    <DropdownSelect
        allowDeselect
    />
</template>
 

isLoading

Shows a loading state for the select box and dropdown.

 <template>
    <DropdownSelect
        isLoading
    />
</template>
 

loadingText

Sets the text to display while the select box is loading. It requires the isLoading prop in order to be useful.

 <template>
    <DropdownSelect
        isLoading
        loadingText="Loading options..."
    />
</template>
 

• Type: string
• Default: 'Loading options...'

clearSelectionAriaLabel

The clearSelectionAriaLabel prop sets the accessible label for the clear selection button. Override it for i18n.

 <template>
    <DropdownSelect
        clearSelectionAriaLabel="Borrar seleccion"
    />
</template>
 

• Type: string
• Default: 'Clear selection'

shouldTeleport

Teleports the dropdown panel to teleportTo (body by default) instead of rendering it as an absolutely-positioned descendant of the select box. Enable this when the select is used inside a container with overflow-hidden/overflow-auto (such as Table), otherwise the dropdown panel gets clipped by that ancestor.

 <template>
    <DropdownSelect
        shouldTeleport
    />
</template>
 

• Type: boolean
• Default: false

teleportTo

Sets the teleport target selector used when shouldTeleport is true.

 <template>
    <DropdownSelect
        shouldTeleport
        teleportTo="body"
    />
</template>
 

• Type: string
• Default: 'body'