The dropdown component will be when the user has multiple options to choose from. It can be used within a form to alter the content of a page - the type of dropdown will depend on the usage.
This is to be used on a form when the user is or to alter the content of a page
A dropdown will consist of a background plate, a chevron icon, an open panel list with options and (depending on its type) a text label.
This is a regular full-sized dropdown to be used along with text inputs in forms and against a large button component. It will have the same attributes as a text input including a text label and error functionality.
This is a slightly shorter dropdown to be used outside of the context of a form when there is less space on the page (i.e. selecting a marketplace on the Balances page) and against a small button component.
This is a slightly shorter dropdown to be used outside of the context of a form when there is less space on the page (i.e. selecting a marketplace on the Balances page) and against a small button component.
Please refer to Specs for examples
The dropdown component can be opened by the user in multiple ways.
The user can hover upon and click on the dropdown to open it and then hover over and select the options. The user can also use the keyboard button to interact.
When the dropdown is in the Active state, the user should be able to hover over other items while it is Active.
Selecting any option on the dropdown list should change the dropdown state from Active back to Focus and populate the field with the selected option. Clicking anywhere outside the dropdown list should change the dropdown state to Default.
Transition to display a state change with a 0.25 ease.
Animations In (dropdown opening) to be a Scale at Cubic Ease-out at 120ms
Animations Out (dropdown closing) should not have any motion.
In the case where there is no space below a dropdown on the viewport (i.e. the placement is at the bottom of the screen or the user has scrolled) the Options list should open upwards instead of downwards.
The scrollable Options list should display a maximum of 6 options, after which it should scroll.
The user should be able to use the mouse, the keyboard (once active) or click and drag the scrollbar.
Accessible behaviour for scrollable Options lists should be consistent i.e the focus state should be shown if they press ENTER on the field to it after which the user should be able to use Tab or Up and Down arrows to select an option. The Options list should always only display 6 options.
The scrollbar should resize automatically depending on the amount of options in the Option list.
Please refer to Behaviour and Prototype for examples
No standard placement for the dropdown.
Please refer to Placement in page designs for examples
Use the appropriate ARIA attributes for screen readers where applicable.
import { DropdownSingle } from '@shieldpay/bumblebee/dropdown-single'; <Dropdown label={<>Regular size dropdown</>} placeholder="Select account…" items={[ { label: 'Bank of Mum‘n’Dad', value: '11' }, { label: 'Fine Ants', value: '22' }, { label: 'The Royal Bank of Haywards Heath', value: '33', }, { label: 'WTF Bank', value: '44' }, ]} onChange={handleValueChange} />;