feat: start autocomplete pattern

Author: thedaviddias

content/en/docs/forms/autocomplete.mdx

@@ -0,0 +1,157 @@
+import { BrowserSupport } from "@app/_components/browser-support";
+import { Callout } from "nextra/components";
+
+# Autocomplete
+
+**_(Also called )_**
+
+- Autosuggest
+
+<Callout type="warning">
+  This page is a work in progress. Don't consider it complete yet.
+</Callout>
+
+## Overview
+
+The **Autocomplete** is an interactive input component that help users quickly find and select values from a predefined list of options as they type.
+
+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.
+
+## Use Cases
+
+### When to use:
+
+- [Use case 1]
+- [Use case 2]
+- [Use case 3]
+
+### When not to use:
+
+- [Anti-pattern 1]
+- [Anti-pattern 2]
+- [Anti-pattern 3]
+
+### Common scenarios and examples
+
+- [Example 1]
+- [Example 2]
+- [Example 3]
+
+## Benefits
+
+- [Benefit 1]
+- [Benefit 2]
+- [Benefit 3]
+
+## Anatomy
+
+```mermaid
+
+```
+
+### Component Structure
+
+1. **Container**
+
+2. **Input**
+
+3. **Label**
+
+4. **Clear Button**
+
+## Best Practices
+
+### Content
+
+**Do's ✅**
+
+- [Best practice 1]
+- [Best practice 2]
+
+**Don'ts ❌**
+
+- [Anti-pattern 1]
+- [Anti-pattern 2]
+
+### Accessibility & UX
+
+**Do's ✅**
+
+- [Best practice 1]
+- [Best practice 2]
+
+**Don'ts ❌**
+
+- [Anti-pattern 1]
+- [Anti-pattern 2]
+
+### Visual Design
+
+**Do's ✅**
+
+- [Best practice 1]
+- [Best practice 2]
+
+**Don'ts ❌**
+
+- [Anti-pattern 1]
+- [Anti-pattern 2]
+
+### Layout & Positioning
+
+**Do's ✅**
+
+- [Best practice 1]
+- [Best practice 2]
+
+**Don'ts ❌**
+
+- [Anti-pattern 1]
+- [Anti-pattern 2]
+
+## Code Examples
+
+### Basic Implementation
+
+```html
+<!-- Basic implementation example -->
+```
+
+## SEO
+
+- [SEO consideration 1]
+- [SEO consideration 2]
+
+## Testing Guidelines
+
+### Functional Testing
+
+**Should ✓**
+
+- [Test case 1]
+- [Test case 2]
+
+## Design Tokens
+
+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.
+
+### Autocomplete Tokens in DTF Format
+
+```json:.json
+{
+  "$schema": "https://design-tokens.org/schema.json",
+  "Autocomplete": {}
+}
+```
+
+## Resources
+
+### Articles
+
+- [9 UX Best Practice Design Patterns for Autocomplete Suggestions](https://baymard.com/blog/autocomplete-design) by Baymard Institute
+- [Best Practices: Designing autosuggest experiences](https://uxmag.com/articles/best-practices-designing-autosuggest-experiences)
+
+### Libraries
+
+- [Library 1]
+- [Library 2]

templates/docs/component.mdx.hbs

@@ -47,6 +47,10 @@ class {{name}} container
 end
 ```
 
+### Component Structure
+
+1. **Container**
+
 ## Best Practices
 
 ### Content