Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(combobox): initial developer guidance #104

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat(combobox): initial developer guidance #104

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions 2007-combobox-developer-guidance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
category: component developer guidance
state: draft
created: 2024-11-11
updated: 2024-11-11
---

# Combobox Developer Guidance

The [combobox](https://clarity.design/documentation/combobox) is a versatile component that combines a text input box with a drop-down list. Users can type text into the input field to filter and narrow down the predefined options available in the drop-down menu.

## Guidance

- Comboboxes **must** be used for lists with more than 10 options. This allows users to easily filter through the options by typing, improving usability and efficiency.
- Comboboxes **must** be used when search and filtering capabilities are needed. This allows users to quickly find specific options from a long list, improving accuracy in their selections and reducing the time spent searching.
- Free text input outside of predefined list options **must not** be allowed in a combobox to ensure valid selections and prevent data entry errors.
- A Multi selection combobox **should** be used when selecting multiple items from a list. This allows users to easily filter and choose options while keeping the interface organized and user-friendly.
- **Should** use an asynchronous combobox when you need data to be lazy loaded. This allows users to begin their selection while the options are being fetched, enhancing the overall user experience and reducing wait times.
- Comboboxes **should** be used when custom input is required or when there’s a need to display a richer user interface in the list. This enhances user interaction by allowing for both predefined options and unique entries, improving flexibility and functionality.

## Content Guidelines

- Option text in the combobox **must** be kept short and concise to improve readability. This helps users quickly scan and understand their choices, enhancing the overall user experience.
- Labels **should** be included for the combobox to ensure accessibility. This helps users understand the purpose of the input and supports those using assistive technologies.
- The length of the items in a combobox **should not** exceed the width of the text field. This ensures that all options are visible and prevents layout issues, maintaining a clean and user-friendly interface.

## Changelog

- **2024-11-11**: Initial guidance
Loading