CP Registry

Select

Nativer <select>-Dropdown mit einheitlichem Styling, Optgroup-Unterstützung und vollstaendiger Validierungslogik. Da ein natives Element verwendet wird, sind Tastatur- und Screenreader-Kompatibilität geraeteuebergreifend sichergestellt.

Standard

Einfache Auswahlfelder für Formulare. Der placeholder erzeugt einen deaktivierten ersten Eintrag, der zur Orientierung dient, aber nicht ausgewählt werden kann.

Tarifauswahl und Ablesezeitraum

<Select
  label="Tarifkategorie"
  name="tariff"
  placeholder="Bitte wählen..."
  options={[
    { value: 'eco', label: 'Oekostrom' },
    { value: 'gas', label: 'Erdgas' },
    { value: 'heat', label: 'Fernwärme' },
  ]}
/>
<Select
  label="Ablesezeitraum"
  name="period"
  required
  options={[
    { value: 'jan', label: 'Januar 2026' },
    { value: 'feb', label: 'Februar 2026' },
    { value: 'mar', label: 'März 2026' },
  ]}
/>

Mit Optgroups

Optgroups gruppieren Einträge unter einer nicht auswaehlbaren Überschrift. Nützlich bei langen Listen – zum Beispiel Laender, Tarife nach Kategorie oder Servicestellen nach Region.

Servicestelle nach Stadtbezirk

<Select
  label="Servicestelle wählen"
  name="branch"
  placeholder="Servicestelle wählen..."
  groups={[
    { label: 'Innenstadt', options: [
      { value: 'main', label: 'Hauptstelle Marktplatz 1' },
      { value: 'west', label: 'Servicecenter West' },
    ]},
    { label: 'Aussenbezirke', options: [
      { value: 'nord', label: 'Standort Nord (Gewerbepark)' },
      { value: 'sued', label: 'Standort Sued (Einkaufszentrum)' },
      { value: 'ost', label: 'Standort Ost (Rathaus Ost)' },
    ]},
  ]}
/>

Zustände

Fehlermeldungen, Hinweistexte und deaktivierte Felder verhalten sich identisch zur Input-Komponente – konsistente UX im gesamten Formular.

Fehler, Hinweis und Deaktiviert

Zu finden auf Ihrem letzten Ablesebescheid.

<Select
  label="Vertragstyp"
  name="contract-type-err"
  error="Bitte wählen Sie einen Vertragstyp aus."
  options={[{ value: 'eco', label: 'Oekostrom' }]}
/>
<Select
  label="Zaehlergroesse"
  name="meter-size"
  hint="Zu finden auf Ihrem letzten Ablesebescheid."
  options={[{ value: '1p', label: 'Einphasig' }, { value: '3p', label: 'Dreiphasig' }]}
/>
<Select
  label="Kundennummer"
  name="customer-disabled"
  disabled
  options={[{ value: '48221', label: '48221 (wird automatisch zugewiesen)' }]}
/>

Installation

cp-components add select