Skip to main content

inno-select

light background
dark background

Properties​

PropertyAttributeDescriptionTypeDefault
disableFloatingLabelAutoResizedisable-floating-label-auto-resizeThe floating label is an absolutely positioned element meaning if it is too long it will grow out of the boundaries of the InnoSelect component. By default the InnoSelect component automatically resizes the floating label so it will fit inside. You can turn this behavior off e.g. if you are sure the label will always fit or it causes some issues.booleanfalse
disableddisabledWhether the select is disabled or not.booleanfalse
disabledBackgroundColordisabled-background-colorDepending on the container html element's background color you can choose a lighter or darker disabled style. Only applicable when variant is 'primary'."dark" | "light"'light'
dropdownWidthdropdown-widthBy default the InnoSelect component automatically resizes the dropdown so it will be as wide as the component itself. You can override it to be a fixed width. Accepts any value that the 'width' css property accepts, e.g. "300px" or "min-content"stringundefined
hasIconshas-iconsWhether the select should use icons. You only have to set this to true if you don't want to use the icon or iconFont properties since your select has no state where nothing is selected.booleanfalse
iconiconIcon for select when no item selected. Use either this or the iconFont property. When icon is present the label doesn't behave as floating. For possible values, see: https://innomotics.github.io/brand-experience/docs/icons/stringundefined
iconFonticon-fontIcon font for select when no item selected. Use either this or the icon property. When icon is present the label doesn't behave as floating. For possible values, see: https://innomotics.github.io/brand-experience/docs/fonts/InnomoticsUiFontstringundefined
keyValueSelector--If you work with object arrays you can set a simple function which returns the unique key value so the objects can be differentiated. By default we assume you work with simple arrays so we simply return the value as it is, in that case you don't have to provide this function.(val: any) => any(val: any) => { return val; }
labellabelLabel for the select when no item selected.stringundefined
valuevalueValue of the select.anyundefined
variantvariantColor variant of the select."dark" | "light" | "primary"'light'

Events​

EventDescriptionType
dropdownClosedThis event is fired when the dropdown is closed. You can use this event for example if you want to reorder your InnoSelectItems after the favorited elements are changed.CustomEvent<void>
favoriteItemsChangedThis event is fired when an item is added to or removed from favorites. The event contains all of the favorited items.CustomEvent<any>
itemIsFavoritedThis event is fired when an item is favorited. You have to take care of managing and ordering the array of favorite items in your business logic.CustomEvent<any>
itemIsUnfavoritedThis event is fired when an item is removed from favorites. You have to take care of managing and ordering the array of favorite items in your business logic.CustomEvent<any>
valueChangedThis event is fired when the value changes.CustomEvent<string>

Methods​

refresh() => Promise<void>​

Can be used to force the inno-select component to rerender.

Returns​

Type: Promise<void>

Dependencies​

Depends on​

Graph​

Built with StencilJS