baseline grid

Dropdowns

Default

Dropdowns can be used in forms on full pages, in modals and in menus. The dropdown component is used to filter or sort contents on a page.

Best practice
Do not use a dropdown if there are only two options to choose from. In this case, use a radio button group instead.
Do not nest dropdowns or use them to display overly complex information.
The native select works more easily with a native form when submitting data and is also easier to use on a mobile platform.
Border: #D0D2DA  |  Label text size: 12px  |  Label text colour: #000000  |   Field text size: 16px  |  Field text colour: #AFB2C0  |  Corner radius: 3px

:enabled

Category

:hover

Category

:disabled

Category

:open

Dropdown build:

Category

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Combination

It’s possible to combine a dropdown with a text field. For instance when a user has to make a choice based on our requirements, with an additional manual input.

Phone number

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.