CP Registry

Input

Formularfelder für Texteingaben aller Art. Unterstützt alle nativen HTML-Input-Typen, Textarea, Validierungszustände und Hilfstexte. Barrierefrei mit aria-describedby für Fehler- und Hinweistexte, Safari-kompatibel.

Standard-Eingabefelder

Die gaengigsten Felder für Kontakt- und Registrierungsformulare. Das required-Attribut fuegt automatisch eine visuelle Markierung und native Pflichtfeldvalidierung hinzu.

Name und E-Mail

Zwei häufig kombinierte Felder in einem zweispaltigen Layout.

<Input label="Name" name="name" placeholder="Maria Musterfrau" />
<Input label="E-Mail" type="email" name="email" placeholder="m.musterfrau@example.de" required />

Weitere Eingabetypen

Alle nativen <input>-Typen werden unterstützt. Der Browser liefert passende Tastaturlayouts auf Mobilgeräten – zum Beispiel eine Zahlentastatur für tel und number.

Passwörter, Datum, Suche und mehr

<Input label="Passwort" type="password" name="password" required />
<Input label="Telefon" type="tel" name="tel" placeholder="+49 781 123 456" />
<Input label="Datum" type="date" name="date" />
<Input label="Suche" type="search" name="search" placeholder="Stichwort eingeben..." />
<Input label="Zählerstand (kWh)" type="number" name="meter" min="0" />
<Input label="Webseite" type="url" name="url" placeholder="https://stadtwerke-musterstadt.de" />

Textarea

Für laengere Texteingaben wie Nachrichten oder Beschreibungen. Die Zeilenzahl ist konfigurierbar. Der optionale Hinweistext erscheint unterhalb des Feldes und gibt zusaätzliche Orientierung.

Mehrzeiliges Textfeld

Mindestens 20 Zeichen. Wir antworten in der Regel innerhalb von 2 Werktagen.

<Input
  label="Ihre Nachricht"
  type="textarea"
  name="message"
  rows={5}
  placeholder="Beschreiben Sie Ihr Anliegen so genau wie möglich..."
  hint="Mindestens 20 Zeichen. Wir antworten in der Regel innerhalb von 2 Werktagen."
/>

Zustände

Fehlermeldungen werden direkt unter dem Feld angezeigt und per aria-describedby mit dem Feld verknüpft – Screen-Reader geben den Fehler beim Fokus aus. Deaktivierte Felder sind sichtbar, aber nicht bearbeitbar.

Fehler, Hinweis und Deaktiviert

Optional – zu finden auf Ihrer Rechnung oben rechts.

<Input
  label="E-Mail-Adresse"
  type="email"
  name="email-err"
  error="Bitte geben Sie eine gueltige E-Mail-Adresse ein."
/>
<Input
  label="Kundennummer"
  name="customer-id"
  hint="Optional – zu finden auf Ihrer Rechnung oben rechts."
/>
<Input label="Vertragsnummer" name="contract" disabled />

Installation

cp-components add input