CustomSelect

Vollständig benutzerdefiniertes Select-Element auf Basis der Popover API und des WAI-ARIA Listbox Patterns. Bietet Tastaturnavigation, Type-Ahead, Anchor Positioning und native Formular-Kompatibilität über ein verstecktes <select>.

Standard

Ein einfaches CustomSelect mit Placeholder. Der Trigger zeigt den Placeholder, bis eine Option gewählt wird.

Förderprogramm-Auswahl

Förderkategorie

<CustomSelect
  label="Förderkategorie"
  name="tariff"
  placeholder="Bitte wählen..."
  options={[
    { value: 'solar', label: 'Solar-Förderung' },
    { value: 'heatpump', label: 'Wärmepumpe' },
    { value: 'charger', label: 'E-Ladesäule' },
    { value: 'cargobike', label: 'Lastenrad' },
  ]}
/>

Vorausgewählt

Mit der value-Prop laesst sich ein Standardwert setzen. Der Trigger zeigt das Label der entsprechenden Option.

Vorauswahl Wärmepumpe

Maßnahme

<CustomSelect
  label="Maßnahme"
  name="energy"
  value="heatpump"
  options={[
    { value: 'solar', label: 'Solar-Förderung' },
    { value: 'heatpump', label: 'Wärmepumpe' },
    { value: 'charger', label: 'E-Ladesäule' },
  ]}
/>

Mit Fehler

Eine Fehlermeldung wird unterhalb des Triggers angezeigt und der Rahmen wechselt auf border-brand-destructive.

Fehlerzustand

Antragsteller-Typ

Bitte wählen Sie einen Antragsteller-Typ aus.

<CustomSelect
  label="Antragsteller-Typ"
  name="contract-type"
  error="Bitte wählen Sie einen Antragsteller-Typ aus."
  options={[
    { value: 'private', label: 'Privatperson' },
    { value: 'business', label: 'Gewerbe' },
    { value: 'municipal', label: 'Kommune / Verein' },
  ]}
/>

Mit Hinweis

Hinweistexte erscheinen unterhalb des Triggers und liefern zusätzlichen Kontext zum Feld.

Hinweistext

Anlagengröße

Zu finden auf Ihrem Angebot des Installateurs.

<CustomSelect
  label="Anlagengröße"
  name="meter-size"
  hint="Zu finden auf Ihrem Angebot des Installateurs."
  options={[
    { value: 'small', label: 'unter 5 kWp' },
    { value: 'large', label: '5 kWp und größer' },
  ]}
/>

Deaktiviert

Ein deaktiviertes Select ist nicht klickbar und visuell gedimmt.

Deaktiviertes Feld

Förder-ID

<CustomSelect
  label="Förder-ID"
  name="customer"
  disabled
  value="48221"
  options={[
    { value: '48221', label: '48221 (wird automatisch zugewiesen)' },
  ]}
/>

Mit deaktivierten Optionen

Einzelne Optionen können deaktiviert werden. Sie sind sichtbar, aber nicht auswählbar und werden bei der Tastaturnavigation übersprungen.

Teilweise deaktivierte Optionen

Standort

<CustomSelect
  label="Standort"
  name="location"
  placeholder="Standort wählen..."
  options={[
    { value: 'north', label: 'Standort Nord' },
    { value: 'south', label: 'Standort Sued (derzeit geschlossen)', disabled: true },
    { value: 'east', label: 'Standort Ost' },
    { value: 'west', label: 'Standort West (derzeit geschlossen)', disabled: true },
    { value: 'center', label: 'Hauptstelle Mitte' },
  ]}
/>

Installation

cp-components add customselect