Code
Props
label
string
❌
info
string
❌
name
string
❌
placeholder
string
❌
id
string
✅
value
string
✅
children
-HTML tags -Custom Components (MenuOption, MenuHeader and MenuDivider)
✅
search
boolean
❌
helptext
string
❌
readOnly
boolean
❌
error
boolean
❌
errorMessage
string
❌
disabled
boolean
❌
autoposition
boolean
❌
showVisuals
boolean
❌
checkSelectedItems
boolean
❌
removeSelectedItems
boolean
❌
onChange
function event
❌
The properties marked with a ? are optionals.
Functionality and Internal Structure
This form control is going to be structured using the same children components implemented in the Menu component, replicating the logic and flexibility at creating options for the dropdown menu. The only difference, is that this component already has a toggle feature that allows to open or close the menu, at the same time it reflects the select item, replacing the original placeholder
prop value.
autoposition
This feature allows developers to not worry about the correct location of the Menu
or MenuBox
component on the screen, because this will relocate it automatically, placing it on the top, bottom, right or left; it all depends on the available space.
showVisuals
In case there were used avatars or icons at creating options for the dropdown menu, showVisuals
will allow the component to display them also on the input box of the dropdown component at the moment selecting one of the items on the menu. By default, this feature is not active on the Dropdown component.
removeSelectedItem
Once an item has been clicked and selected, it will be removed from the list.
checkSelectedItem
Once an item has been clicked and selected, it will show a darker background as a visual indicator.
Event Response
id
string
name
string
label
string
value
string
description (This property will appear only if the description prop exists in the MenuOption component)
string
OnChange
Components Dependency
For this component elaboration, there were used the following internal components:
Menu Header
Menu Divider
Live Demo
For detailed code usage documentation, see the Storybooks for each framework below.
React
Last updated