Introduction

Ein benutzerdefiniertes Dropdown-Auswahlfeld, mit dem Benutzer eine oder mehrere Optionen aus einer vordefinierten Liste wählen können. Diese Komponente dient als vollständig barrierefreie, stylebare und responsive Alternative zum nativen <select>-Element des Browsers.

Die Select-Komponente ist als select-Block vollständig in den Page Builder integriert, sodass Redakteure und Entwickler visuelle Optionen, Platzhalter, Größen, Mehrfachauswahl und Farbthemen direkt im CMS konfigurieren können.

Usage

Diese Beispiele zeigen, wie Redakteure interaktive Dropdown-Auswahlfelder binden und strukturieren.

1. Standard Single-Option-Auswahl

Eine standardmäßige Single-Dropdown-Liste zur Auswahl des bevorzugten Frameworks. Enthält ein eigenes Label und Platzhaltertext.

{
  "type": "select",
  "label": "Framework",
  "placeholder": "Select a framework",
  "interactive": true,
  "items": [
    { "label": "React", "value": "react" },
    { "label": "Solid", "value": "solid" },
    { "label": "Svelte", "value": "svelte", "disabled": true },
    { "label": "Vue", "value": "vue" },
    { "label": "Hono", "value": "hono" }
  ]
}

2. Multi-Option-Auswahl mit Custom-Style (Surface-Variante)

Zeigt, wie mehrere aktive Auswahlen aktiviert werden, wobei die Trigger-Tags durch Kommas getrennt erscheinen. Präsentiert zudem eine eigene surface-Variante.

{
  "type": "select",
  "label": "CSS Frameworks",
  "placeholder": "Choose frameworks",
  "multiple": true,
  "variant": "surface",
  "size": "lg",
  "defaultValue": ["panda"],
  "interactive": true,
  "items": [
    { "label": "Tailwind CSS", "value": "tailwind" },
    { "label": "Panda CSS", "value": "panda" },
    { "label": "Vanilla Extract", "value": "vanilla" }
  ]
}

3. Deaktiviertes Dropdown-Auswahlfeld

Zeigt ein temporär nicht verfügbares oder schreibgeschütztes Select-Element. Dieser Zustand deaktiviert alle Interaktionen und verhindert das Öffnen oder Fokussieren der Liste.

{
  "type": "select",
  "label": "Language Settings",
  "placeholder": "Select Language",
  "disabled": true,
  "interactive": true,
  "items": [
    { "label": "English", "value": "en" },
    { "label": "Deutsch", "value": "de" }
  ]
}

Props

Developer Notes & Accessibility

• Hydration Island: Da Select clientseitiges JS zum Umschalten von Menüs, Filtern und Binden von Tasten benötigt, wird es standardmäßig als interaktive Preact-Insel hydriert ("interactive": true).
• WAI-ARIA-Konformität: Die Komponente fungiert als hochwertige semantische Custom-Combobox. Der Fokus bleibt auf dem Trigger (role="combobox"), Optionen werden über aria-activedescendant, aria-expanded und aria-controls verwaltet. Pfeiltasten, Home/End und Escape funktionieren out-of-the-box.
• Formular-Integration: Sie gibt ein visuell verstecktes nativs <select> mit passenden <option>-Elementen aus. Standard-HTTP-POST-Übermittlungen funktionieren nativ ohne JS-Serialisierung.