Formularkomponenten
Jedes Steuerelement, das ein Formular braucht, vom einfachen Textfeld über eine durchsuchbare Mehrfachauswahl bis zu einem Datumsbereich und einem Einmalcode-Feld. Sie teilen ein Feldsystem für Labels, Beschreibungen und Fehler, sodass sich Validierung überall gleich liest.
Eingabefelder bleiben auf Touchscreens bei 16 Pixeln, damit iOS nie zoomt, ungültige Felder können wackeln, um den Blick zu lenken, und jedes Steuerelement funktioniert allein mit der Tastatur.
- Calendar
- Checkbox
- Combobox
- Date picker
- Field
- Input
- Input group
- Input OTP
- Label
- Native select
- Questionnaire
- Radio group
- Select
- Slider
- Switch
- Textarea
- CalendarEin Datumsraster für Einzel-, Bereichs- und Mehrfachauswahl, mit gleitenden Monaten, Bereichsvorschau und Tagen in Touch-Größe.
- CheckboxEine Checkbox, deren Häkchen sich einzeichnet, mit unbestimmten übergeordneten Elementen, Gruppen und Labels, die ihren Hover teilen.
- ComboboxEin filterbares Select mit Chips, Gruppen und asynchronen Ergebnissen, in einem Popup, das sich beim Tippen anpasst.
- Date pickerEin Button, der einen Kalender in einem Popover öffnet, auf Smartphones als Bottom Sheet, für einzelne Daten und Zeiträume.
- FieldLabels, Beschreibungen und Fehler, mit ihrem Steuerelement verbunden, mit Validierungszuständen und Layouts für Formulare.
- InputEin Texteingabefeld mit drei Größen, ungültigen und schreibgeschützten Zuständen, nativem Validierungsstyling und einer 16-px-Schrift für Touch, damit Smartphones nie hineinzoomen.
- Input groupEin Input mit angehängten Icons, Text, Buttons oder Tastaturhinweis, die sich einen Rahmen und einen Fokusring teilen.
- Input OTPSlots für Einmalcodes, die Tippen, Einfügen und SMS-Autofill annehmen, mit einer optionalen Animation, die Codes kaskadierend einblendet, und einem Status für die Überprüfung.
- LabelEin Label, das seinem Steuerelement folgt: Es dimmt, wenn es deaktiviert ist, und markiert es von selbst als erforderlich oder optional.
- Native selectDas native Select des Browsers, passend zu Input gestylt, mit dezentem Platzhalter, Field-Unterstützung und dem Picker des Betriebssystems auf jedem Gerät.
- QuestionnaireEin schrittweises Formular, das mit Richtungsgefühl zwischen Fragen wechselt, echten Fortschritt zeigt und per Tastatur beantwortet wird.
- Radio groupWähle eine Option aus einer Menge, mit einem Punkt, der zwischen den Optionen übergeben wird, und Karten, deren Auswahlring zur neuen Wahl gleitet.
- SelectWähle eine oder mehrere Optionen aus einer Liste, die beim aktuellen Wert öffnet, mit Typeahead, Gruppen und Formularunterstützung.
- SliderWähle einen Wert oder Bereich durch Ziehen, Tippen auf die Spur oder mit den Tasten, mit gleitenden Sprüngen und einer optionalen Wertblase.
- SwitchEin Ein/Aus-Schalter, den du antippen, drücken oder ziehen kannst, mit einem Thumb, der sich unter deinem Finger streckt, und einem optionalen Pending-Zustand für Speichervorgänge.
- TextareaMehrzeiliger Text, der mit dem Geschriebenen zwischen einer minimalen und maximalen Zeilenzahl sanft wächst, mit Zählern, Validierung und Absende-Tastenkürzel.
In Pro-Blöcken verbaut
Blöcke für KI-Produkte, die aus diesen Komponenten gebaut sind.
- MarkdownMarkdown-Rendering für KI-Antworten. Deckt Streaming ohne halb getippte Syntax, kopierbare Tabellen und Inline-Zitate ab.
- API keysDie API-Schlüssel-Seite eines KI-Produkts. Deckt ein nur einmal gezeigtes Secret, Widerrufen mit Rückgängig und Rotation mit Übergangsfrist ab.
- NotificationsDer Bereich Benachrichtigungen in den Einstellungen eines KI-Produkts. Deckt ein Raster Kanal mal Ereignis, Ruhezeiten und die Browser-Berechtigung für Push ab.
- SecurityDer Bereich Sicherheit in den Einstellungen eines KI-Produkts. Deckt Sitzungen, Zwei-Faktor mit Wiederherstellungscodes und Löschung hinter einer getippten Bestätigung ab.
- BillingDie Plan- und Nutzungsseite eines KI-Produkts. Deckt Guthaben, das mitten im Zyklus ausgeht, Planwechsel mit anteiliger Abrechnung und Kartenfehler ab.
- ModelsDie Seite Modelle in den Einstellungen eines KI-Produkts. Deckt Standardmodell und -aufwand, Anbieter und eigene Server mit Verbindungstest ab.