Komponenten
Inputs
Einzeilige Eingabefelder mit Label, Hinweistext, Validierung und optionalen Erweiterungen.
Verwendung
Ein Input erfasst einen kurzen Wert. Beschrifte jedes Feld mit einem label, damit es auch ohne Placeholder verständlich bleibt.
<gedisa:input label="E-Mail" placeholder="olivia@gedisa.de" />Größen
Zwei Größen passen das Feld an die Dichte der Oberfläche an. Der Standard ist sm mit 40px Höhe, md ist 44px hoch.
<gedisa:input size="sm" label="Small" placeholder="olivia@gedisa.de" />
<gedisa:input size="md" label="Medium" placeholder="olivia@gedisa.de" />Label, Hinweis und Tooltip
required ergänzt den Pflichtstern, description zeigt einen Hinweis unter dem Feld und tooltip blendet ein Hilfe-Icon im Feld ein.
Wir verwenden die Adresse nur für Benachrichtigungen.
<gedisa:input label="E-Mail" required tooltip="Wir senden keine Werbung." description="Wir verwenden die Adresse nur für Benachrichtigungen." placeholder="olivia@gedisa.de" />Validierung
Mit wire:model leitet das Feld seinen name ab und zeigt Fehler aus der Livewire-Validierung automatisch an. Die Beispiele sind live: E-Mail wird beim Verlassen geprüft, der Betrag während der Eingabe.
Validierung beim Verlassen des Feldes.
Validierung während der Eingabe.
<gedisa:input wire:model.blur="email" type="email" label="E-Mail" required icon="envelope" placeholder="olivia@gedisa.de" description="Validierung beim Verlassen des Feldes." />
<gedisa:input wire:model.live.debounce.300ms="amount" label="Betrag" required inputmode="decimal" prefix="€" placeholder="1000,00" description="Validierung während der Eingabe." />Icon und Prefix
Mit icon erhält das Feld ein führendes Icon, mit prefix einen führenden Text wie eine Währung.
<gedisa:input label="E-Mail" icon="envelope" placeholder="olivia@gedisa.de" />
<gedisa:input label="Betrag" prefix="€" placeholder="1.000,00" />Auswahl im Feld
gedisa:input.select platziert eine native Auswahl im leading- oder trailing-Slot, zum Beispiel für Ländervorwahl oder Währung. Beide Werte sind live gebunden.
<gedisa:input wire:model="phone" type="tel" label="Telefonnummer ({{ $country }})" placeholder="+49 (000) 000-0000" x-mask="+49 (999) 999-9999">
<x-slot:leading>
<gedisa:input.select wire:model.live="country" label="Land">
<option value="DE">DE</option>
<option value="AT">AT</option>
<option value="CH">CH</option>
</gedisa:input.select>
</x-slot:leading>
</gedisa:input>
<gedisa:input label="Betrag ({{ $currency }})" prefix="€" placeholder="1.000,00">
<x-slot:trailing>
<gedisa:input.select wire:model.live="currency" label="Währung">
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<option value="CHF">CHF</option>
</gedisa:input.select>
</x-slot:trailing>
</gedisa:input>Addon und Kopieren
addon setzt ein Segment vor das Feld. copyable ergänzt einen Button, der den aktuellen Wert in die Zwischenablage kopiert.
<gedisa:input label="Website" addon="https://" placeholder="www.gedisa.de" />
<gedisa:input label="Link teilen" value="www.gedisa.de/lookbook" copyable />Eigene Inhalte und Masken
Die Slots leading und trailing nehmen beliebige Inhalte auf. Attribute wie x-mask werden an das Eingabefeld weitergereicht.
<gedisa:input wire:model="card" label="Kartennummer" inputmode="numeric" placeholder="0000 0000 0000 0000" x-mask="9999 9999 9999 9999">
<x-slot:leading>
<gedisa:icon.credit-card class="size-5 text-gedisa-fg-quaternary-400" />
</x-slot:leading>
</gedisa:input>Tags
gedisa:input.tags erfasst mehrere Werte als Tags. Enter oder Komma fügt einen Wert hinzu, Backspace oder × entfernt ihn. Mit wire:model wird ein Array gebunden, Einträge können ein avatar enthalten.
<gedisa:input.tags wire:model.live="users" label="Nutzer" required placeholder="Nutzer hinzufügen" :description="count($users) . ' ausgewählt'" />Zustände
disabled sperrt das Feld. error setzt eine Fehlermeldung manuell, invalid markiert das Feld ohne Meldung.
Das Feld ist gesperrt.
Bitte eine gültige E-Mail-Adresse eingeben.
<gedisa:input label="E-Mail" icon="envelope" value="olivia@gedisa.de" disabled description="Das Feld ist gesperrt." />
<gedisa:input label="E-Mail" icon="envelope" value="olivia@" error="Bitte eine gültige E-Mail-Adresse eingeben." />Referenz
Diese Übersicht umfasst die gezeigten Attribute, Slots und Unterkomponenten. Weitere Attribute werden an das native Eingabefeld weitergereicht.
gedisa:input
|
Eigenschaft
|
Werte
|
Default
|
|---|---|---|
| size |
Input-Größen sm, md
|
sm
|
| label | Beschriftung des Feldes | |
| required | Attribut für Pflichtfelder mit Stern | |
| description | Hinweistext unter dem Feld | |
| tooltip | Hilfetext hinter einem Icon im Feld | |
| error | Fehlermeldung, ersetzt den Hinweistext | |
| invalid | Markiert das Feld als fehlerhaft | |
| name |
Feldname, wird sonst aus wire:model abgeleitet
|
|
| icon | Name eines führenden Icons | |
| prefix | Führender Text im Feld | |
| addon | Führendes Segment vor dem Feld | |
| copyable | Button zum Kopieren des Wertes | |
| leading | benannter Slot für vorangestellten Inhalt | |
| trailing | benannter Slot für nachgestellten Inhalt |
gedisa:input.select
|
Eigenschaft
|
Werte
|
Default
|
|---|---|---|
| label | Zugänglicher Name der Auswahl | |
| wire:model | Bindung des ausgewählten Wertes |
gedisa:input.tags
|
Eigenschaft
|
Werte
|
Default
|
|---|---|---|
| size |
Input-Größen sm, md
|
sm
|
| value |
Startwerte ohne Livewire, Strings oder label/avatar-Einträge
|
[]
|
| wire:model | Bindung eines Arrays | |
| name |
Sendet die Werte als name[] ohne Livewire
|
|
| placeholder | Placeholder des Eingabefeldes | |
| remove-label | Zugänglicher Name der Entfernen-Buttons |
Entfernen
|