--- title: "Dropdown | GoodBarber's Design System" description: "The Dropdown component is a versatile tool in the GoodBarber design system. It can be used in a variety of contexts, such as in forms for user input, or in navigation menus for making selections. The component is highly customizable, providing a user-friendly and visually appealing way to present and select options." canonical_url: "https://www.goodbarber.com/uxdesign/dropdown/" lang: nl --- # Dropdown | GoodBarber's Design System [Design System](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://nl.goodbarber.com/uxdesign/](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [Overview](https://nl.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) # Dropdown UI Components This component can be used in forms for user input or in navigation menus to make selections from a given list. Size, shape, and style can be customized. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/dropdown.a2350766676e.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/dropdown.a2350766676e.mp4) ## Introduction The Dropdown component is a versatile tool in the GoodBarber design system. It can be used in a variety of contexts, such as in forms for user input, or in navigation menus for making selections. The component is highly customizable, providing a user-friendly and visually appealing way to present and select options. ## Anatomy ### Common design principles Like Textfield, the Dropdown component comes in **3 sizes** (Small, Medium, Large) and **2 types** (Title UP and Title IN), however, some design principles are common to all these variations : | Title UP | Title IN | | -------- | -------- | | ↓ | ↓ | Inactive state ![Dropdown inactive state in Title-Up and Title-In layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Anatomy-Common-Inactive.67110dcc9aca.png) *Dropdown inactive state in Title-Up and Title-In layout* Focus state ![Dropdown focus state in Title-Up and Title-In layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Anatomy-Common-Focus.a1aa5486cc66.png) *Dropdown focus state in Title-Up and Title-In layout* Complete state ![Dropdown complete state in Title-Up and Title-In layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Anatomy-Common-Complete.1e5f7a7052b6.png) *Dropdown complete state in Title-Up and Title-In layout* ### Component height All field heights in a row are described in the Text Field section ( [Title UP](/uxdesign/textfield/#title_up) [Title IN](/uxdesign/textfield/#title_in)). The Dropdown component uses these field heights for the [state](<>) Disabled / Inactive / Complete / Error. For the **Focus** and **Focus** **error** states, the height of the base field is used for the list items: **Title UP** ![Dropdown height in Title-Up layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Anatomy-Height-TitleUP.2ed7917ea346.png) *Dropdown height in Title-Up layout* **Title IN** ![Dropdown height in Title-In layout](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Anatomy-Height-TitleIN.2fae6808a117.png) *Dropdown height in Title-In layout* ### Font Size The [Font size](/uxdesign/atom-font/#size) changes depending on the devices and the choice of the component size. You can have an overview of all used sizes at the [bottom](/uxdesign/textfield/#preview) of the Text Field section. | | **Component Size** | | **Text Level** | | **Mobile** | | **Tablet** | | **Web** | | | --- | ------------------ | --- | -------------- | --- | ---------- | --- | ---------- | --- | ------- | --- | | | Small | | Body 1 | | 14 | | 15 | | 16 | | | | | | Small Body 1 | | 11 | | 12 | | 12 | | | | Medium | | Body 1 | | 16 | | 17 | | 19 | | | | | | Small Body 1 | | 12 | | 13 | | 13 | | | | Large | | Body 1 | | 19 | | 21 | | 22 | | | | | | Small Body 1 | | 13 | | 14 | | 14 | | ## Properties ### Shape Below, the [Shape atom](/uxdesign/atom-shape/) applied with the types **Sharp / Rounded / Round** for the states Disabled, Inactive, Complete and Error: ![Shape on Dropdown](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Properties-Shape.4f9223c1ec76.png) *Shape on Dropdown* For Focus and Focus Error states in **Round**, we go from a radius of 50% of the component height to 12px. ![Shape on Dropdown according states](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Properties-Shape-Focus.2e044ed39cd1.png) *Shape on Dropdown according states* ⚠️ [Round Shape Specificities](/uxdesign/atom-shape/#round_specificities) ### Border By default, the [Border Atom](/uxdesign/atom-border/) value is **1px** for all [states](#states) except Focus. | Disabled / Inactive / Complete / Error | Focus / Focus Error | | -------------------------------------- | ------------------- | | ↓ | ↓ | ![Border on dropdown according state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Properties-Border.b00ac95b9723.png) *Border on dropdown according state* ### Shadow The [Shadow level](/uxdesign/atom-shadow/#shadow_levels) changes for the **Focus** and **Focus Error** [states](#states): in fact, we go to the higher level to accentuate the elevation and thus highlight the activated component. ⚠️ Please note that the Inner Shadow option is not available for Focus and Focus Error. | Disabled / Inactive / Complete / Error | Focus / Focus Error | | -------------------------------------- | ------------------- | | ↓ | ↓ | ![Drop shadow level 1&2 on dropdown](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Properties-Shadow-Drop-Level1.ac6a7a34ef3c.png) *Drop shadow level 1&2 on dropdown* ![Drop shadow according dropdown state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Properties-Shadow-Drop-Level2.0f572b167f9d.png) *Drop shadow according dropdown state* ![Mix Inner & Drop shadow according dropdown state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Properties-Shadow-Inner-Level-1.0c0b809df78a.png) *Mix Inner & Drop shadow according dropdown state* ![Mix levels of Inner & Drop shadow according dropdown state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Properties-Shadow-Inner-Level-2.1014b670b468.png) *Mix levels of Inner & Drop shadow according dropdown state* ## Layout ### Overlapping As we’ve just seen, the Border and Shadow properties change with the Focus state. This allows the active component to be highlighted, especially when the elements overlap as below: | Border | Shadow | | ------ | ------ | | ↓ | ↓ | ![Dropdown in form view](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Layout-Overlapping.ad5d02bf8780.png) *Dropdown in form view* ### Overflow When the text of the component is larger than the allocated space, ellipses are used. ![Dropdown width](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Layout-Overflow.e7889be5b2ed.png) *Dropdown width* ## Behavior ![Dropdown behavior](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Behaviour.fd8d737e5dcf.gif) *Dropdown behavior* ### States (Complete path) | Title UP | Title IN | | -------- | -------- | | ↓ | ↓ | Disabled ![Dropdown Disabled state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Layout-Behaviour-01-Disable.1dfd2d0907e8.png) *Dropdown Disabled state* Inactive ![Dropdown Inactive state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Layout-Behaviour-02-Inactive.2f1217e5fe39.png) *Dropdown Inactive state* Focus ![Dropdown Focus state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Layout-Behaviour-03-Focus.929b532a6076.png) *Dropdown Focus state* Hover ![Dropdown Hover state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Layout-Behaviour-04-Hover.9067b0fef6d5.png) *Dropdown Hover state* Complete ![Dropdown Complete state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Layout-Behaviour-05-Complete.e4237e1943f6.png) *Dropdown Complete state* Error ![Dropdown Error state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Layout-Behaviour-07-Error.115526aafadb.png) *Dropdown Error state* Error Focus ![Dropdown Error Focus state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Layout-Behaviour-08-Error-Focus.fc92efc0dfed.png) *Dropdown Error Focus state* ### States (Pre-selection) | Title UP | Title IN | | -------- | -------- | | ↓ | ↓ | Inactive ![Pre-selection in Inactive state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Layout-Behaviour-PreSelection-01.d7ba8dcacc86.png) *Pre-selection in Inactive state* Focus ![Pre-selection in Focus state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Layout-Behaviour-PreSelection-02.8eae3345acf5.png) *Pre-selection in Focus state* Complete ![Pre-selection in Complete state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Dropdown-Layout-Behaviour-PreSelection-03.ed04e41d199b.png) *Pre-selection in Complete state*