Skip to content

Singleware/ui-select

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

UI-Select

Custom HTML element used to replace the common select element, this custom element provides a simple way to customize the select input, arrow, list and its options inside.

State Attributes

Name Description
empty Automatically assigned when there is no option selected
opened Automatically assigned when the options list is displayed
found Automatically assigned when there are options found
invalid Automatically assigned when there is an invalid option selected

Mirrored Properties

Name Description
name Get and set the element name in the input slot
required Get and set the required state in the input slot element
disabled Get and set the disabled state in the input slot element

Properties

Name Description
selection Get the current selected option
search Get the current search text
opened Get the current opened state
found Get the options found state
count Get the total number of options
empty Get the current empty state
value Get the selected value or selects another options
defaultValue Get and set the defaultValue
searchable Get and set the searchable state
readOnly Get and set the readOnly state
options Set the initial list of options in the component construction

Methods

Name Description
focus Move the focus to the input slot element
reset Reset the current value to the default value
checkValidity Get the validity of the input slot element
setCustomValidity Set a custom validity in the input slot element
addGroup Adds a new group to be used by options
addOption Adds a new select option
clear Clear all options
open Opens the options list
close Closes the options list
toggle Toggles the options list

Slots

Name Description
input Element to shows the selected option. Use: input or button element
search Element to shows the options search (can be omitted)
arrow Element to shows the customizable arrow (can be omitted)
result Element to aggregate options with their groups
empty Element to be visible when there are no options in the result

Events

Name Description
focus Dispatched when the input slot is focused
blur Dispatched when the input slot loses focus
change Dispatched when a different option is selected
renderoption Dispatched when an option is added, needs to render the option element
renderselection Dispatched when as option is selected, needs to render the current selection
rendergroup Dispatched when an group is added, needs to render the group element

Install

Using npm:

npm i @singleware/ui-select

License

MIT © Silas B. Domingos