Universell einsetzbar

Select funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/select) — die Library erkennt die Umgebung automatisch.

Select

Select rendert ein barrierefreies Dropdown mit optionaler Suchfilterung, gruppierten Optionen, Multi-Select und asynchronem Laden externer Optionen.

---

Übersicht

import { Select } from "@prokodo/ui/select"
;<Select
  name="country"
  label="Country"
  options={[
    { label: "Germany", value: "de" },
    { label: "Austria", value: "at" },
  ]}
  value={country}
  onChange={setCountry}
/>

Live PreviewOpen in Storybook ↗

---

Import

import { Select } from "@prokodo/ui/select"

CSS:

import "@prokodo/ui/select.css"

---

Props

Prop	Typ	Standard	Pflicht	Beschreibung
id	string	—	✅	HTML-id für das Select (für Barrierefreiheit).
items	SelectItem[]	—	✅	Auswählbare Optionen.
label	string	—	—	Beschriftungstext.
name	string	—	—	Name für die Formular-Übermittlung.
value	string | string[]	—	—	Gesteuerter Wert.
defaultValue	string | string[]	—	—	Unkontrollierter Ausgangswert.
placeholder	string	—	—	Platzhaltertext, wenn nichts ausgewählt ist.
multiple	boolean	false	—	Mehrfachauswahl ermöglichen.
disabled	boolean	false	—	Select deaktivieren.
required	boolean	false	—	Feld als Pflichtfeld markieren.
fullWidth	boolean	false	—	Container-Breite ausfüllen.
iconVisible	boolean	true	—	Dropdown-Chevron-Icon anzeigen/ausblenden.
color	Variants	—	—	Farbakzent-Variante.
helperText	string	—	—	Hilfetext unterhalb des Selects.
errorText	string	—	—	Fehlermeldung (setzt auch Fehlerzustand).
onChange	(e: SelectEvent, value: SelectValue) => void	—	—	Wird bei Auswahländerung aufgerufen.
className	string	—	—	CSS-Klasse am Root-Element.
className	string	—	—	CSS-Klasse am Root-Element.

Siehe src/components/select/Select.model.ts für den vollständigen SelectProps-Typ.

---

Design-Tokens

Passe Select über CSS Custom Properties auf :root oder einem übergeordneten Element an.

Token	Standard	Beschreibung
--pk-select-bg	var(--pk-color-surface)	Trigger-Hintergrund
--pk-select-fg	var(--pk-color-fg)	Trigger-Textfarbe
--pk-select-label-fg	var(--pk-color-brand)	Floating-Label-Farbe
--pk-select-radius	var(--pk-radius-pill)	Eckenradius des Triggers
--pk-select-shadow	var(--pk-shadow-sm)	Box-Schatten des Triggers
--pk-select-listbox-shadow	var(--pk-shadow-lg)	Schatten des Dropdown-Panels
--pk-select-gradient-from	var(--pk-color-brand)	Verlauf Start (Fokus)
--pk-select-gradient-to	var(--pk-color-accent)	Verlauf Ende (Fokus)
--pk-select-item-hover-bg	var(--pk-palette-primary-50)	Listen-Item-Hover-Hintergrund
--pk-select-item-active-bg	var(--pk-palette-primary-100)	Selektierter-Item-Hintergrund

AIC-Hinweis

Verwende im Anwendungscode immer den Standard-Importpfad:

import { Select } from "@prokodo/ui/select"

Eine separate Auswahl von /client oder /lazy ist im Consumer-Code nicht erforderlich.

AIC-Komponenten unterstützen außerdem ein priority-Flag für kritische Above-the-fold-Elemente. Am sichtbarsten ist das bei Image (natives Preloading via <link rel="preload"> für Above-the-fold-Inhalte).

---

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
1.3.5	Eingabezweck identifizieren (AA)	🔍 Manuell prüfen	Formularfelder, die persönliche Daten erfassen, müssen ihren Zweck via HTML-autocomplete-Attribut kommunizieren.
2.1.1	Tastatur (A)	✅ Erfüllt	Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen.
2.1.2	Keine Tastaturfalle (A)	🔍 Manuell prüfen	Der Tastaturfokus darf niemals innerhalb einer Komponente eingeschlossen sein; Nutzer müssen immer mit Standardtasten navigieren können.
2.4.3	Fokusreihenfolge (A)	🔍 Manuell prüfen	Die Tastaturfokus-Reihenfolge muss im vollständigen seitenseitigen Integrationskontext Bedeutung und Bedienbarkeit erhalten.
2.4.7	Fokus sichtbar (AA)	🔍 Manuell prüfen	Auf jedem interaktiven Element muss ein sichtbarer Tastaturfokus-Indikator vorhanden sein. Prüfung gegen das angewendete Produkt-Theme erforderlich.
2.4.11	Fokus nicht verdeckt (Min.) (AA)	🔍 Manuell prüfen	Die fokussierte Komponente darf nicht vollständig durch Sticky-Header, Overlays oder andere positionierte Seitenelemente verdeckt sein.
3.3.1	Fehlererkennung (A)	🔍 Manuell prüfen	Eingabefehler müssen in Textform identifiziert und dem Nutzer beschrieben werden, nicht nur durch Farbe.
3.3.2	Bezeichnungen oder Anweisungen (A)	✅ Erfüllt	Jedes Formularfeld benötigt ein programmatisch verknüpftes Label oder eine sichtbare Anweisung.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.
4.1.3	Statusmeldungen (AA)	✅ Erfüllt	Statusmeldungen (Laden, Erfolg, Fehler, Fortschritt) müssen assistiven Technologien ohne Fokusverschiebung mitgeteilt werden (aria-live oder role='status').

Testabdeckung: 3 jest-axe-Assertion(s) in 5 Testdatei(en) · 10 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 Select in Storybook öffnen

---

Quellcode

src/components/select/Select.model.ts