Select
A custom select input element that can be used to select an option.
+
Tailwind and Alpine
Data
Below you will find the data properties available in the x-data attribute of this element.
| Property and Description | Description |
|---|---|
| selectOpen | A boolean value that will determine if the select dropdown is open or not |
| A boolean value that will determine if the select dropdown is open or not | |
| selectedItem | The current selected item. This will hold the object of the selected item where you can get the title and value |
| The current selected item. This will hold the object of the selected item where you can get the title and value | |
| selectableItems | An array containing an objects of selectable items. Each object should have a title, value, and disabled property |
| An array containing an objects of selectable items. Each object should have a title, value, and disabled property | |
| selectableItemActive | This value contains an active item. An item is considered active when it is hovered or highlighted via the keyboard |
| This value contains an active item. An item is considered active when it is hovered or highlighted via the keyboard | |
| selectId | Each select element in your project will contain a unique ID, this will contain the unique ID |
| Each select element in your project will contain a unique ID, this will contain the unique ID | |
| selectKeydownValue | When the select element is focused and the user enters a key, the closest matching item will be selected |
| When the select element is focused and the user enters a key, the closest matching item will be selected | |
| selectKeydownTimeout | The timeout in milliseconds to clear the keydown value. (example: If a user types 'a', and waits two seconds and types 'b', we should search for an item starting with 'b', instead of 'ab') |
| The timeout in milliseconds to clear the keydown value. (example: If a user types 'a', and waits two seconds and types 'b', we should search for an item starting with 'b', instead of 'ab') | |
| selectDropdownPosition | The positioning of the dropdown. Possible values are 'bottom' or 'top' |
| The positioning of the dropdown. Possible values are 'bottom' or 'top' | |
| selectKeydownClearTimeout | The timeout interval for the keydown value to be cleared |
| The timeout interval for the keydown value to be cleared | |
| selectableItemIsActive(item) | A method that will check if the item passed in is the current active item |
| A method that will check if the item passed in is the current active item | |
| selectableItemActiveNext() | A method that will set the next item as active |
| A method that will set the next item as active | |
| selectableItemActivePrevious() | A method that will set the previous item as active |
| A method that will set the previous item as active | |
| selectScrollToActiveItem() | A method that will scroll the active item into view |
| A method that will scroll the active item into view | |
| selectKeydown(event) | This method will handle the keydown event on the select element |
| This method will handle the keydown event on the select element | |
| selectItemsFindBestMatch() | This method will find the best matching item based on the keydown value |
| This method will find the best matching item based on the keydown value | |
| selectPositionUpdate() | This method will calculate the position of the element and determine if selectDropdownPosition should be set to 'bottom or 'top' |
| This method will calculate the position of the element and determine if selectDropdownPosition should be set to 'bottom or 'top' |
