Code

Props

Props	Data Type	Required
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

Property	Data Type
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

import React, {useState} from 'react';
import {Dropdown, MenuOption, MenuDivider, Menuheader} from '@2600hz/sds-react-components';

const Example = ()=>{
    const [selectedItem, setSeletedItem] = useState('');
    
    const updateState = (e)=>{
        setSelectedItem(e.value);
    }
    
    return(
        <div className='container'>
            <Dropdown id='dropdown' onChange={updateState}>
                <MenuOption description="Lorem ipsum"> Element 1 </MenuOption>
                <MenuOption> Element 2 </MenuOption>
                <MenuOption> Element 3 </MenuOption>
                <MenuOption> Element 4 </MenuOption>
            </Dropdown>
        </div>
    )
}

Components Dependency

For this component elaboration, there were used the following internal components:

• Label

• Menu

• Menu Header

• Menu Divider

• Menu Option

  • Avatar

  • Telicon

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

React

Storybooksipster-react-component-storybook.netlify.app