You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This page is a work in progress. Don't consider it complete yet.
18
-
</Callout>
11
+
**_(Also called Autosuggest)_**
19
12
20
13
## Overview
21
14
22
-
The **Autocomplete** is an interactive input component that help users quickly find and select values from a predefined list of options as they type.
15
+
The **autocomplete** is an interactive input component that helps users quickly find and select values from a predefined list of options as they type.
23
16
24
17
They combine the flexibility of text input with dropdown-style selection, providing suggestions that match the user's input in real-time. This pattern reduces errors, speeds up data entry, and improves the overall form completion experience.
25
18
@@ -43,110 +36,160 @@ They combine the flexibility of text input with dropdown-style selection, provid
43
36
44
37
### Common scenarios and examples
45
38
46
-
-[Example 1]
47
-
-[Example 2]
48
-
-[Example 3]
39
+
-**Searching for products** in an e-commerce catalog
40
+
-**Entering city names** for travel or weather applications
41
+
-**Looking up user or contact names** in a messaging or collaboration tool
49
42
50
43
## Benefits
51
44
52
-
-[Benefit 1]
53
-
-[Benefit 2]
54
-
-[Benefit 3]
45
+
-**Speeds up data entry** by narrowing down possible options in real-time
46
+
-**Reduces user frustration** and guesswork by guiding them to valid options
47
+
-**Minimizes mistakes** and typos, as suggestions can be confirmed or chosen from a list
55
48
56
49
## Anatomy
57
50
58
51
### Component Structure
59
52
60
53
1.**Container**
61
54
55
+
- Wraps the entire autocomplete area, including the input and dropdown
56
+
- Handles positioning, sizing, and possible floating layers for the suggestions
57
+
62
58
2.**Input**
63
59
60
+
- The text field where users type their query
61
+
- Provides real-time updates and triggers suggestion fetching
62
+
64
63
3.**Label**
65
64
65
+
- Optional text label describing the input’s purpose
66
+
- Provides clarity for screen readers and visible context for users
67
+
66
68
4.**Clear Button**
67
69
70
+
- Allows users to quickly clear the input field
71
+
- Often represented by an “X” or “✕” icon
72
+
68
73
## Best Practices
69
74
70
75
### Content
71
76
72
77
**Do's ✅**
73
78
74
-
-[Best practice 1]
75
-
-[Best practice 2]
79
+
-Provide a descriptive label that indicates the purpose of the Autocomplete field
80
+
-Use placeholder text to show example input (e.g., "Start typing a country...")
76
81
77
82
**Don'ts ❌**
78
83
79
-
-[Anti-pattern 1]
80
-
-[Anti-pattern 2]
84
+
-Don’t rely on placeholder text as a replacement for a label
85
+
-Don’t make your suggestions so vague that it’s unclear what the user is selecting
81
86
82
87
### Accessibility & UX
83
88
84
89
**Do's ✅**
85
90
86
-
-[Best practice 1]
87
-
-[Best practice 2]
91
+
- Use `aria-controls`, `aria-autocomplete`, and other relevant ARIA attributes to help screen readers
92
+
- Include a visually hidden label or descriptive text if you rely on an icon-only clear button
93
+
- Add a debounce delay to the input field to avoid triggering a fetch request too often
88
94
89
95
**Don'ts ❌**
90
96
91
-
-[Anti-pattern 1]
92
-
-[Anti-pattern 2]
97
+
-Don’t remove focus outlines without providing alternative focus indicators
98
+
-Don’t assume all users can use a mouse; ensure keyboard navigation works properly
93
99
94
100
### Visual Design
95
101
96
102
**Do's ✅**
97
103
98
-
-[Best practice 1]
99
-
-[Best practice 2]
104
+
-Keep the suggestion list clearly delineated, with sufficient contrast and spacing
105
+
-Highlight hovered or focused suggestion items with a distinct visual state
100
106
101
107
**Don'ts ❌**
102
108
103
-
-[Anti-pattern 1]
104
-
-[Anti-pattern 2]
109
+
-Don’t display an overly large list of suggestions (limit it to a reasonable number), use a scroll bar to allow users to scroll through the list.
110
+
-Don’t create a cluttered or confusing interface by mixing too many design elements
105
111
106
112
### Layout & Positioning
107
113
108
114
**Do's ✅**
109
115
110
-
-[Best practice 1]
111
-
-[Best practice 2]
116
+
-Position the dropdown list immediately below the input field
117
+
-Ensure suggestions list appears in front of other page elements when open
112
118
113
119
**Don'ts ❌**
114
120
115
-
-[Anti-pattern 1]
116
-
-[Anti-pattern 2]
121
+
-Don’t hide the list behind overlays or modals
122
+
-Don’t move the dropdown to a completely different area away from the input
117
123
118
124
## Code Examples
119
125
120
126
### Basic Implementation
121
127
122
128
```html
123
-
<!-- Basic implementation example -->
129
+
<!-- Basic Autocomplete Markup -->
130
+
<div>
131
+
<labelfor="autocompleteInput">Search for an option</label>
<!-- Dynamically generated suggestions go here -->
144
+
</ul>
145
+
</div>
124
146
```
125
147
126
-
## SEO
127
-
128
-
-[SEO consideration 1]
129
-
-[SEO consideration 2]
130
-
131
-
## Testing Guidelines
132
-
133
-
### Functional Testing
134
-
135
-
**Should ✓**
136
-
137
-
-[Test case 1]
138
-
-[Test case 2]
139
-
140
148
## Design Tokens
141
149
142
150
These design tokens follow the [Design Tokens Format](https://design-tokens.github.io/community-group/format/) specification and can be used with various token transformation tools to generate platform-specific variables.
0 commit comments