Skip to content

Select ​

Select is a customizable dropdown component that provides various styling options, icons, and interactive features.

Props ​

PropTypeDefaultDescription
modelValuestring''The selected value of the dropdown
optionsArray[]Array of options to display in the dropdown
placeholderstring''Placeholder text when no option is selected
checkmarkbooleanfalseShows checkmark icon for selected options
disabledbooleanfalseDisables the select component

Slots ​

Slot NameDescriptionSlot Props
#valueCustom content for the selected value display{ value }
#optionCustom content for each dropdown option{ option }
#dropdowniconCustom dropdown indicator iconnone
#placeholderCustom placeholder contentnone

Basic Usage ​

Default Select ​

Simple select dropdown with basic styling.

Select with Custom Dropdown Icon ​

Replace the default dropdown icon with a custom search icon.

Select with User Icons and Checkmarks ​

Features user icons in both the value display and options, with checkmarks for selected items.

Select with Badge Display ​

Shows selected value as a styled badge.