Verification Inputs

Verwendung

Ein Verification Input erfasst kurze Codes, zum Beispiel aus einer SMS oder E-Mail. Der Fokus springt automatisch weiter, Einfügen verteilt den Code auf alle Felder.

<gedisa:otp label="Sicherheitscode" description="Das ist ein Hinweistext." />

Größen

Drei Größen mit 64px, 80px und 96px pro Feld. Der Standard ist md.

<gedisa:otp size="sm" label="Small" />
<gedisa:otp size="md" label="Medium" />
<gedisa:otp size="lg" label="Large" />

Länge und Trenner

length legt die Anzahl der Stellen fest. Bei sechs Stellen wird automatisch ein Trenner eingefügt, separator schaltet ihn gezielt an oder aus.

<gedisa:otp size="sm" length="6" label="Sicherheitscode" />

Validierung

Mit wire:model.live wird der Code bei jeder Eingabe an Livewire übertragen. Das Beispiel prüft den vollständigen Code, der gültige Demo-Code ist 123456.

<gedisa:otp wire:model.live="code" size="sm" length="6" label="Sicherheitscode" :description="$verified ? 'Code bestätigt.' : 'Gib den Code aus der E-Mail ein.'" />

Zustände

disabled sperrt alle Felder, error markiert sie und zeigt eine Fehlermeldung.

<gedisa:otp size="sm" label="Deaktiviert" disabled />
<gedisa:otp size="sm" label="Fehler" error="Der Code ist ungültig." />

Referenz

Diese Übersicht umfasst die gezeigten Attribute. Die Eingabelogik stammt aus flux:otp.

gedisa:otp