Spezielle Eingabefelder

Telefonnummern mit Land, Kartendaten, Einmalcodes, Datei-Uploads, Profilbilder und Unterschriften.

6 Components · 20 Variants

Kategorie wechseln

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

Profilbild-Auswahl4
Kartenfeld4
Telefonfeld4
Unterschriftsfeld4
Datei-Upload2
Einmalcode2

avatar-picker

Profilbild-Auswahl

Das Bild für ein Profil. Ein Foto per Ziehen, Zoom und Tasten zuschneiden, ein Bild aus Initialen machen, aus einer Auswahl wählen oder es in einer kompakten Einstellungszeile ändern.

Foto zuschneiden
Initialen
Aus einer Auswahl
Einstellungszeile

Props und Details

Foto zuschneiden

Ein rundes Fenster über dem Foto, ziehen zum Platzieren, Zoom mit Regler, Rad oder + und -, Pfeile schieben fein. Drittel erscheinen beim Zuschneiden, kleine Vorschauen folgen, der Ausschnitt geht an den Server.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/avatar-picker

Bringt mit utils, kit, icon, avatar, dropdown-menu, slider

Usage

<AvatarPicker name="Elif Aydın" image={<img src={photo} alt="" />} onFramingChange={setFraming} onSave={save} />

Source

Initialen

Initialen aus dem Namen auf einer Farbe, auf der weiße Schrift lesbar bleibt, rund oder eckig, ganz ohne Foto. Drei Größen zeigen es so, wie es erscheint.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/avatar-picker

Bringt mit utils, kit, icon, avatar, dropdown-menu, slider

Usage

<AvatarPicker variant="initials" name="Jonas Weber" defaultShape="circle" />

Source

Aus einer Auswahl

Eine Auswahl an Bildern als Radiogruppe, Pfeile bewegen in Reihen und Spalten. Das gewählte federt in die Vorschau.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/avatar-picker

Bringt mit utils, kit, icon, avatar, dropdown-menu, slider

Usage

<AvatarPicker variant="gallery" name="Lea Hoffmann" options={pictures} defaultSelected={2} />

Source

Einstellungszeile

Das aktuelle Bild mit Name und E-Mail. Sein Menü lädt ein Foto hoch, wechselt zu Initialen oder entfernt das Bild.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/avatar-picker

Bringt mit utils, kit, icon, avatar, dropdown-menu, slider

Usage

<AvatarPicker variant="inline" name="Mara Lindqvist" description="mara@example.com" image={<img … />} />

Source

card-input

Kartenfeld

Kartennummer, Ablaufdatum und Prüfnummer mit Gruppierung, Luhn-Prüfung, automatischem Weiterspringen und klaren Meldungen, ohne Netzwerknamen oder Logos.

Eine Zeile
Untereinander
Kartenvorschau
Gespeicherte Karten

Props und Details

Eine Zeile

Nummer, Ablauf und Prüfnummer in einer Zeile, die letzten beiden gleiten herein, sobald die Nummer steht. Auf dem Telefon zwei Reihen in einem Feld. Der Zahlknopf erwacht, wenn alles stimmt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/card-input

Bringt mit utils, kit, icon, input, checkbox

Usage

<CardInput label="Card" onValueChange={(card) => setComplete(card.complete)} />

Source

Untereinander

Jeder Teil mit eigenem Label, der Name darunter, eine Option, die Karte zu behalten. Eine vollständige Nummer zeichnet einen Haken, die Rücktaste in einem leeren Teil geht zum vorigen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/card-input

Bringt mit utils, kit, icon, input, checkbox

Usage

<CardInput variant="stacked" withName rememberOption />

Source

Kartenvorschau

Eine gezeichnete Karte folgt jeder Taste, das Ablaufdatum leuchtet beim Tippen auf, und für die Prüfnummer dreht sich die Karte auf die Rückseite.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/card-input

Bringt mit utils, kit, icon, input, checkbox

Usage

<CardInput variant="preview" withName />

Source

Gespeicherte Karten

Hinterlegte Karten zur Wahl, mit Endziffern und Ablauf, die Standardkarte markiert. Eine neue Karte klappt ihre Felder mit weicher Höhe auf.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/card-input

Bringt mit utils, kit, icon, input, checkbox

Usage

<CardInput variant="saved" savedCards={[{ id: "c1", last4: "4821", expiry: "08/29", isDefault: true }]} />

Source

phone-input

Telefonfeld

Eine Telefonnummer mit Land, ohne Flaggen. Beim Tippen gruppiert wie im Land üblich, zurückgegeben in E.164, mit durchsuchbarer Länderliste.

Land und Nummer
Erkennt das Land
Zwei Felder
Code senden

Props und Details

Land und Nummer

Land und Nummer in einem Feld. Die Liste sucht Namen, Kürzel und Vorwahlen, eine führende 0 fällt weg, ein eingefügtes +41 wählt die Schweiz, eine vollständige Nummer zeichnet einen Haken.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/phone-input

Bringt mit utils, kit, icon, input, select, popover

Usage

<PhoneInput label="Phone" defaultCountry="DE" preferred={["DE", "AT", "CH"]} />

Source

Erkennt das Land

Ein Feld für alle, die die Nummer vollständig tippen. Das + und die Vorwahl setzen das Land, sein Kürzel federt am Anfang herein, der Rest gruppiert sich selbst.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/phone-input

Bringt mit utils, kit, icon, input, select, popover

Usage

<PhoneInput variant="detect" label="Phone for the courier" />

Source

Zwei Felder

Vorwahl und Nummer nebeneinander als zwei Bedienelemente, für lange Formulare, in denen jedes Feld für sich steht. Die Favoriten führen die Liste an.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/phone-input

Bringt mit utils, kit, icon, input, select, popover

Usage

<PhoneInput variant="split" label="Mobile" optional preferred={["GB", "IE", "US"]} />

Source

Code senden

Ein Sendeknopf, der erst bei vollständiger Nummer erwacht, kurzes Warten, dann eine ablaufende Linie bis zum erneuten Senden. Hier folgt das Codefeld und bestätigt das Telefon.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/phone-input

Bringt mit utils, kit, icon, input, select, popover

Usage

<PhoneInput variant="verify" label="Mobile" onSendCode={(number) => api.sendCode(number)} />

Source

signature-pad

Unterschriftsfeld

Eine Unterschrift mit Finger, Stift oder Maus, Tinte, die mit dem Tempo atmet, Zurücknehmen und Leeren, Tippen als Alternative für die Tastatur, und SVG als Wert.

Zeichnen
Vertrag
Kürzel
Feld mit Dialog

Props und Details

Zeichnen

Das Feld mit gestrichelter Linie, letzten Strich zurücknehmen oder alles leeren. Zeichnen oder tippen, der Bestätigen-Knopf erwacht, sobald eine Unterschrift da ist.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/signature-pad

Bringt mit utils, kit, icon, popover

Usage

<SignaturePad label="Signature" signer="Noor Haddad" onChange={(v) => setSignature(v.svg)} />

Source

Vertrag

Bedingungen in einem eigenen Scrollbereich, ein Häkchen zum Zustimmen, dann die Unterschrift. Ein fehlender Schritt wird benannt, nach dem Unterschreiben zeichnet sich die Tinte noch einmal mit Datum und Name.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/signature-pad

Bringt mit utils, kit, icon, popover

Usage

<SignaturePad variant="contract" label="Studio lease" terms={paragraphs} agreeLabel="I have read the lease" signer="Lea Hoffmann" onSign={send} />

Source

Kürzel

Ein kleines Feld je Abschnitt für das Kürzel, jede Zeile wird mit Haken grün, ein Balken zählt, wie viele erledigt sind.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/signature-pad

Bringt mit utils, kit, icon, popover

Usage

<SignaturePad variant="initials" label="Initial each section" sections={["Rent and deposit", "Kiln times", …]} />

Source

Feld mit Dialog

Ein Feld im Formular, das ein großes Unterschriftsfeld öffnet. Auf dem Telefon kommt es von unten, auf größeren Schirmen als Dialog, und der Fokus bleibt darin. Danach steht die Unterschrift klein im Feld.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/signature-pad

Bringt mit utils, kit, icon, popover

Usage

<SignaturePad variant="dialog" label="Signature" signer="Sami Brandt" onSign={(v) => setSignature(v.svg)} />

Source

file-upload

Datei-Upload

Eine Ablagefläche mit Dateiliste: Fortschritt, fertig und fehlgeschlagen, mit Prüfung von Typ, Größe und Anzahl.

Ablagefläche
Kompakt

Props und Details

Ablagefläche

Dateien hineinziehen oder den Dialog per Tastatur öffnen. Der Rand läuft, solange eine Datei darüber schwebt, jeder Balken füllt sich, eine fertige Datei zeichnet ihren Haken. Erneut versuchen startet die fehlgeschlagene neu.

Installv1.0.1

aiw add @ai-website/file-upload

Bringt mit utils, kit, icon, input

Usage

<FileUpload label="Attachments" accept=".pdf,image/*" maxSize={10e6} multiple onFiles={upload} />

Source

Kompakt

Ein Knopf und eine Zeile mit Regeln, für eine einzelne Datei in einem längeren Formular.

Installv1.0.1

aiw add @ai-website/file-upload

Bringt mit utils, kit, icon, input

Usage

<FileUpload variant="compact" multiple={false} label="CV" accept=".pdf" />

Source

otp-input

Einmalcode

Getrennte Felder auf einem echten Eingabefeld: Einfügen, SMS-Autofill und Rücktaste arbeiten wie erwartet.

Bestätigen
Zustände

Props und Details

Bestätigen

Sechs Ziffern in zwei Gruppen, in einer Anmeldekarte. Jede Ziffer springt in ihr Feld, ein falscher Code schüttelt, der richtige schickt eine grüne Welle.

Installv1.0.0

aiw add @ai-website/otp-input

Bringt mit utils, kit, input, icon

Usage

<OtpInput length={6} groups={[3, 3]} onComplete={verify} />

Source

Zustände

Leer, falsch und angenommen, dazu eine kurze PIN.

Installv1.0.0

aiw add @ai-website/otp-input

Bringt mit utils, kit, input, icon

Usage

<OtpInput error="This code is not right." />  <OtpInput success hint="Code accepted" />

Source

Ähnliche Components

Mehr aus Elements, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Spezielle Eingabefelder stehen.

In die Zwischenablage kopiert