docs: Update Combobox (#1725)

* docs: Update Combobox

* fix index.mdx

* small update overview.mdx

* Add Combobox vs. Autocomplete in guidelines.mdx

* Update autocomplete vs. combobox guidelines.mdx

* Fixes after Review on guidelines.mdx

* Changes after review on index.mdx

* Changes after review on overview.mdx

* fix button link

Author: Jan-Eimertenbrink

apps/docs/src/content/03-components/form-controls/combo-box/guidelines.mdx

@@ -0,0 +1,31 @@
+# Grundlagen
+
+Die ComboBox kombiniert ein Texteingabefeld mit einem Auswahlmenü. Sie ermöglicht es Usern, durch die Eingabe von Text Vorschläge aus einer vordefinierten Liste zu erhalten und daraus eine Auswahl zu treffen. Die Liste wird bei Texteingabe dynamisch gefiltert. Eine freie Eingabe außerhalb der vorgeschlagenen Optionen ist nicht vorgesehen.
+
+## Best practices
+
+Achte bei der Verwendung einer ComboBox darauf, dass…
+* die angezeigten Optionen klar und eindeutig benannt sind.
+* die Liste der Vorschläge sinnvoll eingegrenzt ist, um die Auswahl zu erleichtern.
+* die vorgeschlagenen Optionen die erwarteten Eingaben möglichst vollständig abdecken.
+
+## Verwendung
+
+Verwende eine Combobox, um… 
+* Usern eine gezielte Auswahl aus einer umfangreicheren Liste zu ermöglichen.
+* Eingaben zu beschleunigen und Eingabefehler zu minimieren, indem passende Optionen vorgeschlagen werden.
+
+## ComboBox vs. Autocomplete
+
+ComboBoxen und [Autocomplete](/03-components/form-controls/autocomplete) sehen oft ähnlich aus, erfüllen aber unterschiedliche Zwecke.

+<DoAndDont> 
+<Plain heading="Verwende ComboBox, um z. B. …"> 
+- aus einer vordefinierten Liste von Optionen eine Auswahl zu treffen.
+- bei bekannten, überschaubaren Optionen (z. B. Sprachen, Kategorien, Geschlecht).
+</Plain>
+
+<Plain heading="Verwende Autocomplete, um z. B. …"> 
+- Usern zu ermöglichen, freie Eingaben zu machen, während Vorschläge zur Auswahl angezeigt werden. 
+- bei langen oder dynamischen Datenlisten (z. B. Städte, Usernamen, Tags). 
+</Plain>
+</DoAndDont>

apps/docs/src/content/03-components/form-controls/combo-box/index.mdx

@@ -1,8 +1,7 @@
 ---
 component: ComboBox
 description:
-  Die ComboBox Komponente verbindet ein Textfield mit einer Auswahl an Optionen,
-  die durch Eingabe in das Textfield gefiltert wird.
+  Die ComboBox kombiniert ein Texteingabefeld mit einem Auswahlmenü. Bei der Eingabe wird eine vordefinierte Liste dynamisch gefiltert, aus der eine Auswahl getroffen werden kann.
 ---
 
 <LiveCodeEditor editorDisabled />

apps/docs/src/content/03-components/form-controls/combo-box/overview.mdx

@@ -1,11 +1,15 @@
 # Playground
 
+Verwende `<ComboBox />`, um eine ComboBox darzustellen. Nutze ein `<Label />`, um Informationen zu vermitteln, die das Verständnis der Eingabeanforderungen erleichtern.
+
 <LiveCodeEditor />
 
 ---
 
 # Mit FieldDescription
 
+Um wichtige Hinweise zur ComboBox bereitzustellen, kann unterhalb eine `<FieldDescription />` eingebaut werden.
+
 <LiveCodeEditor example="fieldDescription" editorCollapsed />
 
 ---
@@ -14,19 +18,18 @@
 
 ## Align
 
-Benutze die [Align](/03-components/structure/align) Komponente, um einem Button
-neben deiner ComboBox zu platzieren.
+Benutze [Align](/03-components/structure/align), um einem [Button](/03-components/actions/button) neben deiner ComboBox zu platzieren.
 
 <LiveCodeEditor example="align" editorCollapsed />
 
 ## ContextualHelp
 
-Benutze die [ContextualHelp](/03-components/overlays/contextual-help)
-Komponente, wenn du weitere Informationen bereitstellen möchtest, und diese zu
-lang für die FieldDescription sind.
+Verwende ein [ContextualHelp](/03-components/overlays/contextual-help), wenn du weitere Informationen bereitstellen möchtest, und diese zu lang für die FieldDescription sind.
 
 <LiveCodeEditor example="contextualHelp" editorCollapsed />
 
 ## React Hook Form
 
+Weitere Details zur Formularlogik und -validierung sind in der Component [Form (React Hook Form)](/03-components/form-controls/form-react-hook-form) zu finden.
+
 <LiveCodeEditor example="form" editorCollapsed />