Become an affiliate and earn up to 35%
You can participate in Setproduct partnership program and earn up to 35% from every sale you made. We provide promo materials and detailed instructions how to boost the conversion
Hire us to design & code! Let's build together ✊
We design in Figma & Webflow using the top-notch UX expertise and lay down the lines of code in React, Vue, Angular, Flutter and Swift.
Please, fill the form below or say 'Hello' hello@setproduct.com
Please, fill the form below or say 'Hello' hello@setproduct.com
Submit your Figma resource
Get listed at Setproduct and pumped to the Figma Community top as we can promote your freebie via our followers, newsletter and website.
By clicking Submit button below I agree to get listed at Setproduct Figma community profile.
Get published at Setproduct
Share your thoughts, research, conclusions around Design, Development, Product Management, Marketing, or other Tech-related topics.
You are free to promote yourself, but please consider a commercial post for advertising your product.
You are free to promote yourself, but please consider a commercial post for advertising your product.
We accept only unique publications never posted elsewhere.
We respect the Privacy Policy, so your link won't be distributed anywhere without your permission.
We respect the Privacy Policy, so your link won't be distributed anywhere without your permission.
TUTORIALS
Dropdown UI design guide
Design compelling Dropdowns with clear instructions. Customize themes, improve usability, and ensure accessibility. Elevate user experience with captivating design. Ready to get started? Let's go!
This documentation provides a comprehensive guide to Dropdowns UI design. It covers the anatomy of a component, common use cases, custom theming options, and emphasizes usability and accessibility. Readers will gain the knowledge to create user-friendly and visually appealing Dropdowns that align with user's needs and accessibility requirements.
Dropdown – is a user interface (UI) element that allows users to select one option from a list of available choices.
Dropdowns are commonly used in interfaces to provide compact and efficient selection controls for various purposes. They can be triggered by clicking or tapping on a toggle button, which expands or collapses the dropdown menu.
Dropdowns are commonly used in interfaces to provide compact and efficient selection controls for various purposes. They can be triggered by clicking or tapping on a toggle button, which expands or collapses the dropdown menu.
Table of contents
Dropdown Anatomy
Dropdown Theming
Dropdowns Use Cases
UX & Usability Tips
Nucleus UI
Nucleus is a serious UI component library that provides you with the building blocks you need to design your next mobile app. Save thousands of design hours with: 1000+ components & variants, text properties and nested instances, variables & global styles, Light and dark modes via variables, 700+ unique & premium mobile app screens.
Learn more →
Learn more →
Dropdown Anatomy
Types of Dropdowns
Standard Dropdown
Definition: A Dropdown that presents a list of options in a compact form where only one option can be selected at a time.
Use case: A standard Dropdown is commonly used for selecting a single option from a predefined set of choices, such as choosing a country, a font style, or a category.
Design tips: Ensure that the Dropdown can accommodate the maximum number of options without compromising usability or visibility. Avoid overcrowding with too many options, and consider implementing scrolling or grouping if necessary.
Definition: A Dropdown that presents a list of options in a compact form where only one option can be selected at a time.
Use case: A standard Dropdown is commonly used for selecting a single option from a predefined set of choices, such as choosing a country, a font style, or a category.
Design tips: Ensure that the Dropdown can accommodate the maximum number of options without compromising usability or visibility. Avoid overcrowding with too many options, and consider implementing scrolling or grouping if necessary.
Multi-Level Dropdown
Definition: A Dropdown that allows for nested submenus or levels, allowing users to navigate through a hierarchical structure of options.
Use case: Multi-Level Dropdowns are useful when dealing with complex data or menu structures where options are organized in multiple levels or categories. They are commonly used in navigation menus or settings panels, where subcategories or submenus need to be accessed.
Design tips: Clearly indicate the hierarchy and relationship between the different levels of options. Use visual cues, such as indentation, arrows, or icons, to indicate the submenus or levels. Additionally, ensure that the dropdown menu is wide enough to accommodate the nested options, and consider providing a back button or breadcrumb navigation to help users easily navigate back to previous levels.
Definition: A Dropdown that allows for nested submenus or levels, allowing users to navigate through a hierarchical structure of options.
Use case: Multi-Level Dropdowns are useful when dealing with complex data or menu structures where options are organized in multiple levels or categories. They are commonly used in navigation menus or settings panels, where subcategories or submenus need to be accessed.
Design tips: Clearly indicate the hierarchy and relationship between the different levels of options. Use visual cues, such as indentation, arrows, or icons, to indicate the submenus or levels. Additionally, ensure that the dropdown menu is wide enough to accommodate the nested options, and consider providing a back button or breadcrumb navigation to help users easily navigate back to previous levels.
Searchable Dropdown
Definition: A Dropdown that includes a search input field to help users find and select options quickly from a long list.
Use case: Searchable Dropdowns are valuable when the list of options is extensive, such as selecting a city from a long list or choosing from a large database of products.
Design ✍: Optimize the search functionality to provide accurate and relevant results in real-time. Consider implementing features like suggestions, highlighting, and filtering to enhance the search experience and help users find options effortlessly.
Definition: A Dropdown that includes a search input field to help users find and select options quickly from a long list.
Use case: Searchable Dropdowns are valuable when the list of options is extensive, such as selecting a city from a long list or choosing from a large database of products.
Design ✍: Optimize the search functionality to provide accurate and relevant results in real-time. Consider implementing features like suggestions, highlighting, and filtering to enhance the search experience and help users find options effortlessly.
Multi-select Dropdown
Definition: A Dropdown that allows multiple options to be selected simultaneously.
Use case: Multi-select Dropdowns are useful when users need to choose multiple options at once, like selecting multiple items for bulk actions, tagging items with multiple categories, or filtering search results.
✍ Provide a clear indicator to show which options are selected, and consider using a "Select All" option for convenience if applicable. Display selected options as chips within the Dropdown area, giving users a clear overview of their chosen items. Additionally, provide a "Clear All" option to remove all selected chips.
Definition: A Dropdown that allows multiple options to be selected simultaneously.
Use case: Multi-select Dropdowns are useful when users need to choose multiple options at once, like selecting multiple items for bulk actions, tagging items with multiple categories, or filtering search results.
✍ Provide a clear indicator to show which options are selected, and consider using a "Select All" option for convenience if applicable. Display selected options as chips within the Dropdown area, giving users a clear overview of their chosen items. Additionally, provide a "Clear All" option to remove all selected chips.
Key Elements and their Functions
Trigger/Button
Definition: The clickable element that triggers the Dropdown to open and close.
Use case: Used to save space in the interface when there are limited display options available.
✍ Design the trigger/button to be easily identifiable and clickable. Use clear and concise labels or icons to indicate its purpose. Consider adding a Caret Down icon next to the trigger/button to visually indicate its expandable nature. Apply a subtle background highlight or border on hover or focus to make it interactive.
Definition: The clickable element that triggers the Dropdown to open and close.
Use case: Used to save space in the interface when there are limited display options available.
✍ Design the trigger/button to be easily identifiable and clickable. Use clear and concise labels or icons to indicate its purpose. Consider adding a Caret Down icon next to the trigger/button to visually indicate its expandable nature. Apply a subtle background highlight or border on hover or focus to make it interactive.
Caret Down Icon
Definition: An arrow icon, typically pointing downward, placed next to the trigger/button.
Use case: Used to indicate that there are hidden options that can be revealed by activating the Dropdown.
✍ Design the Caret Down icon to be visually distinct and recognizable. Use an arrow icon pointing downward to let user know – they can expand a Dropdown. Ensure the icon is aligned with the trigger/button and has sufficient spacing to avoid accidental clicks or taps.
Definition: An arrow icon, typically pointing downward, placed next to the trigger/button.
Use case: Used to indicate that there are hidden options that can be revealed by activating the Dropdown.
✍ Design the Caret Down icon to be visually distinct and recognizable. Use an arrow icon pointing downward to let user know – they can expand a Dropdown. Ensure the icon is aligned with the trigger/button and has sufficient spacing to avoid accidental clicks or taps.
Dropdown Border
Definition: A visible outline or border surrounding the Dropdown component.
Use case: Used to visually distinguish the Dropdown from other elements on the screen.
✍ Apply a subtle border around the Dropdown component to create visual distinction. Use a color that contrasts with the background to ensure visibility. Adjust the border thickness to achieve an appropriate visual hierarchy within the interface.
Definition: A visible outline or border surrounding the Dropdown component.
Use case: Used to visually distinguish the Dropdown from other elements on the screen.
✍ Apply a subtle border around the Dropdown component to create visual distinction. Use a color that contrasts with the background to ensure visibility. Adjust the border thickness to achieve an appropriate visual hierarchy within the interface.
Options/Items
Definition: Individual selectable elements within the Dropdown List.
Use case: Used to present a specific set of choices or actions to the user.
✍ Use clear labels for each option and maintain consistency in presentation (e.g., font size, alignment, color). Differentiate the selected option, such as by highlighting it or applying a different background color. Add a subtle hover effect to indicate interactivity.
Definition: Individual selectable elements within the Dropdown List.
Use case: Used to present a specific set of choices or actions to the user.
✍ Use clear labels for each option and maintain consistency in presentation (e.g., font size, alignment, color). Differentiate the selected option, such as by highlighting it or applying a different background color. Add a subtle hover effect to indicate interactivity.
Dropdown List/Menu
Definition: The list of items shown to the user when a Dropdown is open.
Use case: Used to present a set of options to select from.
✍ Add a thin border around the Dropdown List to visually separate it from other elements. Use ample spacing between items and maintain consistent alignment and typography for a clean and organized appearance. Consider adding a scrollbar or pagination if the list becomes too long to fit within the available space.
Definition: The list of items shown to the user when a Dropdown is open.
Use case: Used to present a set of options to select from.
✍ Add a thin border around the Dropdown List to visually separate it from other elements. Use ample spacing between items and maintain consistent alignment and typography for a clean and organized appearance. Consider adding a scrollbar or pagination if the list becomes too long to fit within the available space.
Dropdown States and Interactions
Default state
Definition: The initial state of the Dropdown before any interaction occurs.
Function: It displays a default text or placeholder within the Dropdown to indicate that a selection can be made.
✍ Ensure the default text or placeholder is visually distinct from user-selected options and clearly communicates that the Dropdown is interactive.
Definition: The initial state of the Dropdown before any interaction occurs.
Function: It displays a default text or placeholder within the Dropdown to indicate that a selection can be made.
✍ Ensure the default text or placeholder is visually distinct from user-selected options and clearly communicates that the Dropdown is interactive.
Hover state
Definition: The hover state occurs when a user hovers their cursor over the Dropdown options or dropdown toggle.
Function: It provides visual feedback to indicate that the Dropdown is interactive and the option is selectable.
✍ Use a visually distinguishable hover effect, such as changing the background color or adding a highlight, to make it clear which option is currently being hovered over.
Definition: The hover state occurs when a user hovers their cursor over the Dropdown options or dropdown toggle.
Function: It provides visual feedback to indicate that the Dropdown is interactive and the option is selectable.
✍ Use a visually distinguishable hover effect, such as changing the background color or adding a highlight, to make it clear which option is currently being hovered over.
Expanded/Open state
Definition: The expanded or open state occurs when the user clicks or interacts with the Dropdown toggle, revealing a list of options.
Function: It displays the available options for selection and allows to make a choice.
✍ Ensure the expanded state provides enough visual space to display all options clearly, consider using scrolling or pagination for long lists, and visually separate the Dropdown options from other page content.
Definition: The expanded or open state occurs when the user clicks or interacts with the Dropdown toggle, revealing a list of options.
Function: It displays the available options for selection and allows to make a choice.
✍ Ensure the expanded state provides enough visual space to display all options clearly, consider using scrolling or pagination for long lists, and visually separate the Dropdown options from other page content.
Selected state
Definition: This state represents the user's choice from the Dropdown options.
Function: It shows the user's selected option when the Dropdown is collapsed, providing a quick reference for their choice.
✍ Clearly indicate the selected option, either through text, visual styling, or both, to avoid confusion and provide clarity to the user. Consider visual cues like checkmarks or highlighting the selected option.
Definition: This state represents the user's choice from the Dropdown options.
Function: It shows the user's selected option when the Dropdown is collapsed, providing a quick reference for their choice.
✍ Clearly indicate the selected option, either through text, visual styling, or both, to avoid confusion and provide clarity to the user. Consider visual cues like checkmarks or highlighting the selected option.
Disabled state
Definition: The disabled state occurs when the Dropdown is not interactive or unavailable for selection.
Function: It conveys that the Dropdown is temporarily unavailable, often due to certain conditions or requirements not being met.
✍ Visually differentiate the disabled state to indicate that the Dropdown cannot be interacted with. Use reduced opacity, gray out the component, or add a visual indicator like a disabled icon.
Definition: The disabled state occurs when the Dropdown is not interactive or unavailable for selection.
Function: It conveys that the Dropdown is temporarily unavailable, often due to certain conditions or requirements not being met.
✍ Visually differentiate the disabled state to indicate that the Dropdown cannot be interacted with. Use reduced opacity, gray out the component, or add a visual indicator like a disabled icon.
Error state
Definition: The error state indicates that an invalid selection or input has been made within the Dropdown.
Function: It alerts the user that there is a problem with their selection and provides feedback on what needs to be corrected.
✍ Use visual cues such as error messages, color changes, or icons to clearly communicate the error state. Provide clear and concise error messages that guide users toward resolving the issue.
Definition: The error state indicates that an invalid selection or input has been made within the Dropdown.
Function: It alerts the user that there is a problem with their selection and provides feedback on what needs to be corrected.
✍ Use visual cues such as error messages, color changes, or icons to clearly communicate the error state. Provide clear and concise error messages that guide users toward resolving the issue.
Dropdown Theming
Corner Radius
Set a convenient corner radius is to create a visually pleasing dropdown component that fits harmoniously within the overall design language of the interface.
✍ Pick a corner radius that aligns with the overall design language and matches the level of formality or informality desired. Aim for consistency in corner radius across different interface elements to promote visual coherence.
Border Style
Choose an appropriate border color is to define the boundaries of the dropdown component and provide a clear visual distinction from other elements.
✍ Select a border color that provides sufficient contrast with the background and text, ensuring clear separation and affordances. Test different border styles to find the one that complements the overall design and enhances usability.
Using Shadows
Shadows help to provide depth and separate the dropdown component from the background, making it appear interactive and stacked on top of other elements.
✍ Experiment with shadows to create depth and hierarchy. Use subtle shadows to add a sense of elevation to the dropdown, ensuring consistency across different states and interactions for a polished user experience.
Container Color
The container color helps to create visual cohesion and indicate the state of the dropdown (e.g., open, closed, selected).
✍ Choose a container color based on the interface's color palette, emphasizing legibility and accessibility. Use color psychology to evoke desired emotions and create visual harmony within the dropdown component.
Applying Gradients
Gradients can add depth, dimension, and visual interest to the dropdown component, making it more visually engaging and aesthetically appealing.
✍ Optionally utilize gradients to add depth and visual interest to the dropdown. Experiment with different gradient styles and color combinations while ensuring they align with the overall UI aesthetics and provide adequate contrast for easy readability.
Menu Expand/Collapse Animation
Dropdown transitions by Vitaly Silkin
The animation helps to provide visual feedback and convey the interaction states of expanding and collapsing the dropdown menu.
✍ Create smooth and intuitive animations for opening and closing the dropdown. Pay attention to timing, easing, and speed to ensure a satisfying experience that enhances usability and provides clear visual feedback.
Icon Rotation Effect
The icon rotation effect visually communicates the state change of the dropdown, indicating whether it is open or closed.
✍ Implement a rotation effect for the dropdown icon to visually indicate its open or closed state. Ensure the rotation animation is easily understandable and visually appealing, aligning with the overall interface design and adding interactivity.
✍ Create smooth and intuitive animations for opening and closing the dropdown. Pay attention to timing, easing, and speed to ensure a satisfying experience that enhances usability and provides clear visual feedback.
Icon Rotation Effect
The icon rotation effect visually communicates the state change of the dropdown, indicating whether it is open or closed.
✍ Implement a rotation effect for the dropdown icon to visually indicate its open or closed state. Ensure the rotation animation is easily understandable and visually appealing, aligning with the overall interface design and adding interactivity.
Dropdown Use Cases
Using in Navigation Menus
A navigation menu dropdown is commonly used on websites to help users explore web pages of the site, or web app sections. It provides a clear and organized structure for users to find the information they need.
Sample of a navigation menu dropdown from an e-commerce website:
Sample of a navigation menu dropdown from an e-commerce website:
Dropdown for navigation pros:
- Saves space in the header by hiding secondary or tertiary nav options.
- Provides a clear options hierarchy.
Cons:
- May hide important navigation options and reduce discoverability.
- Longer interaction time if users have to navigate multiple levels.
Language Selection
Language/region selector dropdowns allow users to switch between different language or regional variations of a website. They simplify the user interface by avoiding cluttering the screen with language options.
Here's an example for such a use case:
Here's an example for such a use case:
Dropdown for language pros:
- Allows users to switch between language or regional variations of a website easily.
- Simplifies the user interface by avoiding clutter of language options.
Cons:
- Users may not be familiar with the language or regional abbreviations used in the dropdown.
- Long list of languages or regions can be difficult to scan and select from.
Data Input Forms
Data input forms often use dropdowns to provide users with predefined options for selecting values or input. They ensure accurate and consistent data entry.
Here's a dropdown in a data input form for selecting a date format:
Here's a dropdown in a data input form for selecting a date format:
Dropdown for data input pros:
- Provides users with a pre-defined set of options, reducing errors and ensuring consistency.
- Takes up less space compared to radio buttons or checkboxes when there are many options.
Cons:
- May limit users' ability to enter custom or non-listed options.
- Requires additional interaction steps to reveal the available options.
Filter and Sorting Options
Filter and sorting options dropdowns are commonly used in e-commerce or data-heavy applications to help users narrow down their search results or sort data based on specific criteria.
Here's a sample filtering options dropdown:
Here's a sample filtering options dropdown:
Dropdown for filtering pros:
- Enables users to refine or sort the content according to their preferences easily.
- Helps users focus on specific subsets of data, reducing cognitive load.
Cons:
- Users may not be aware of available filtering options, leading to potential frustration.
- Dropdowns with numerous filter options can become overwhelming and cumbersome to use.
Configuration Settings
Dropdowns can be used for configuration settings, allowing users to customize their preferences or adjust various options within a system or application. This use case is commonly seen in software settings or account management interfaces.
Here's a configuration settings dropdown:
Here's a configuration settings dropdown:
Dropdown for settings pros:
- Provides a consolidated and organized way to access and modify configuration settings.
- Saves space and reduces visual clutter by hiding less frequently accessed settings.
Cons:
- Users may find it challenging to locate specific options within a long dropdown list.
- Dropdowns with a large number of settings may require excessive scrolling or become overwhelmed with options.
Selection of Single/Multiple Items
Dropdowns can also be used for selecting single or multiple items from a predefined list. They are commonly used in forms or settings where users need to make multiple selections.
Here's a selection of multiple items within a dropdown:
Here's a selection of multiple items within a dropdown:
Dropdown for settings pros:
- Provides a compact and organized way for users to select single or multiple options from a list.
- Offers a clear visual representation of selected options, enhancing user understanding.
Cons:
- Dropdowns with long lists of options can be difficult to navigate and select from.
- The visual representation of selected options may become cluttered with a large number of selections.
UX & Usability Tips
Default Values and Placeholder Text
UX problem: Users may be unsure about the initial state of the Dropdown or may not notice that a selection is required.
Solution: Include a default value or placeholder text in the Dropdown to provide users with an indication of the expected input. This helps users understand the purpose of the Dropdown and encourages them to make a selection. Placeholder should clearly convey the type of options available.
Solution: Include a default value or placeholder text in the Dropdown to provide users with an indication of the expected input. This helps users understand the purpose of the Dropdown and encourages them to make a selection. Placeholder should clearly convey the type of options available.
Logical and Intuitive Organization
UX problem: Users can feel overwhelmed or frustrated if Dropdown options are not logically organized or grouped.
Solution: Group options in a logical manner such as by category, relevance, or alphabetical order. Use visual cues, such as dividers or indentation, to indicate hierarchy or relationships between options. Implement a search or filter functionality for lengthy or nested lists.
Solution: Group options in a logical manner such as by category, relevance, or alphabetical order. Use visual cues, such as dividers or indentation, to indicate hierarchy or relationships between options. Implement a search or filter functionality for lengthy or nested lists.
Keyboard Accessibility
UX problem: Users who rely on keyboard navigation may struggle to interact with Dropdowns effectively.
Solution: Ensure Dropdowns can be navigated and activated using keyboard-only inputs. Provide clear keyboard focus indication and allow users to navigate through options using arrow keys. Use the Enter or Space key to select an option, and allow the Escape key to dismiss the Dropdown.
Solution: Ensure Dropdowns can be navigated and activated using keyboard-only inputs. Provide clear keyboard focus indication and allow users to navigate through options using arrow keys. Use the Enter or Space key to select an option, and allow the Escape key to dismiss the Dropdown.
Selected Option Feedback
UX problem: Users may not be aware of the option they have selected in the Dropdown, especially if they inadvertently click outside the Dropdown or if the selected option is not immediately visible.
Solution: Provide clear visual feedback to indicate the selected option: highlight the selected option or display a checkmark next to it. Visually distinguish the selected option from the rest of the options by using a different font weight or color. Display the selected option above or next to the Dropdown as a temporary label, reinforcing users' selection and reminding them of their choice.
Solution: Provide clear visual feedback to indicate the selected option: highlight the selected option or display a checkmark next to it. Visually distinguish the selected option from the rest of the options by using a different font weight or color. Display the selected option above or next to the Dropdown as a temporary label, reinforcing users' selection and reminding them of their choice.
Color Contrast and Visual Accessibility
UX problem: Users with visual impairments may have difficulty discerning Dropdown options if the color contrast is insufficient.
Solution: Adhere to accessibility guidelines for color contrast, ensuring that the text and background colors within the Dropdown meet the recommended contrast ratio. Consider using additional visual cues, such as borders or icons, to differentiate selected or focused options.
Solution: Adhere to accessibility guidelines for color contrast, ensuring that the text and background colors within the Dropdown meet the recommended contrast ratio. Consider using additional visual cues, such as borders or icons, to differentiate selected or focused options.
Limiting number of options and incorporating search functionality
UX problem: Dropdowns with an extensive list of options can become overwhelming, making it challenging for users to locate their desired choice quickly.
Solution: Limit the number of visible options initially, either by displaying a set number of options or using scrollable menus to avoid overwhelming the user with a long list. Implement a search or filter functionality within the Dropdown to allow users to search for specific options by typing keywords. This enables users to find their desired option quickly, especially in Dropdowns with a large number of choices.
Solution: Limit the number of visible options initially, either by displaying a set number of options or using scrollable menus to avoid overwhelming the user with a long list. Implement a search or filter functionality within the Dropdown to allow users to search for specific options by typing keywords. This enables users to find their desired option quickly, especially in Dropdowns with a large number of choices.
More useful tutorials
Avatar UI design exploration — The states of userpic component
Avatar (aka Userpic) — is a component used to represent a user's profile picture. The default content for Avatar is empty state, initials or user's picture.
Accordion UI design exploration — Styles, states, usage, templates
Accordion (aka Expansion panel) — is a vertically stacked list of options that can expand/collapse to reveal or hide more associated content.
Appbar UI design exploration — Anatomy, specs, states, templates
Application Bar (aka Appbar) — displays prior in-app controls related to the current app section.
Badge UI design exploration — Tips & tricks, usability, and use cases review
Badge (aka Tag) — small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.
Breadcrumbs UI design exploration — Anatomy, UX tips, use cases overview
Breadcrumbs — is a composition of navigational links to reveal the current position in case of multi-level nested structure for a website, dashboard or application.
Buttons UI design – Comprehensive tutorial on UX, styles and usability
Designing buttons that work well requires taking into consideration the style, feedback, and accessibility. The design goal should be to make the them as intuitive as possible so the user can interact with Buttons seamlessly.
Dropdown UI design – A guide for Anatomy, UX tips, and Use cases
Unlock the power of Dropdowns. Discover the core elements, custom theming options, usability tips, and accessibility best practices. Design Dropdowns that captivate users and align with your brand's persona. Ready to embark on this design adventure? Let's dive in!
Chips UI Design – An essential tutorial for optimal UX & usability
Learn the step-by-step process of Chip design. Take a deep dive into component design and learn step-by-step with this comprehensive tutorial, including: Chips anatomy, States, Use cases and Usability tips.
Input UI Design – Optimize data forms UX with expertly crafted text fields
Follow this in-depth guide to create Input components that blend seamlessly with your app UI design, while optimizing forms filling experience and overall usability.
Checkbox UI design – Unlocking anatomy, proven UX tips, and inspiring use cases
This tutorial is dedicated to providing practical answers to your Checkbox design dilemmas: from addressing the complexity of Checkbox styling to solving the challenges of ensuring an inclusive UX.
Subscribe to Setproduct
Once per week we send a newsletter with new releases, freebies and blog publications