Leadity Komponentenreferenz
Form-Controls und Filter
Die Referenz bildet die vollständige aktive Form-Page aus Figma ab und ordnet Primitive, Select-Anwendungsfälle, Dropdown-Unterbäume, Open States und Filterkompositionen getrennt. Alle Beispiele sind fachlich neutral und lassen sich modulübergreifend einsetzen.
Form 2855:5675 · Filter 8944:56298
Figma-Inventar und Dokumentationsorte
Alle aktiven Sections und Parts der Form-Page sind einem ausführbaren Abschnitt zugeordnet. Fachliche Produktkompositionen bleiben in ihrem besitzenden Paket; diese Seite dokumentiert ihre Form-Primitives und Zustände.
Auswahl und Select
Chip-Primitives öffnenDropdown-Unterbäume
Kompositionsvertrag öffnenFachliche Editor-Komposition
Task Surfaces öffnenFilter in Produktseiten
Bearbeitungsübersicht öffnenTemplate-Kompositionen öffnenWeitere Referenzen
App-Schale öffnenAccessibility-Vertrag öffnenNicht übernommen: `toggleswitch OUTDATED` aus Figma `3166:12427`. Die aktive Referenz ist ausschließlich `4142:4693`.
1 · Eingabefelder und Beschriftungsvarianten
InputText und Textarea zeigen die drei freigegebenen Labelpositionen sowie die relevanten Zustände. Default und Error bleiben getrennt; Pflichtkennzeichnung und Fehlermeldung wechseln erst nach Validierung.
InputText · ohne sichtbares Label
.inputtext · 40 px · Figma `5629:5339`
InputText · Floating Empty
56 px · Empty
InputText · Floating Filled
56 px · Filled
InputText · Readonly
neutral-10 · Pen-Slash · fokussier- und kopierbar
InputText · Disabled
neutral-10 · gedämpft · nicht interaktiv
InputText · Error
Figma `5623:4435` · Error-Text mit s2
Textarea · Top Label
172 px Komposition
Textarea · Floating Filled
153 px Floating Label
Textarea · ohne sichtbares Label
136 px Basisschale
Textarea · Readonly
neutral-10 · Pen-Slash
Textarea · Disabled
neutral-10 · ohne Readonly-Icon
2 · Auswahlcontrols
Checkbox, Radio und Toggle behalten native beziehungsweise passende ARIA-Semantik. Kleine und reguläre Größen, Mixed, Error und Disabled sind getrennt sichtbar.
Toggle · unmittelbar wirksam
Optionsliste · links
Optionsliste · untereinander
Optionsliste · daneben
Figma `5418:13408` bildet Left, Below und Beside als Kompositionsrichtungen derselben nativen Primitives ab.
3 · Select-Anwendungsfälle
Die Select-Familie trennt Beschriftungsposition und fachliche Komposition. Controlled Selects verwenden dieselbe zugängliche Open-State-Logik; sichtbare native Browser-Dropdowns sind ausgeschlossen.
Select · Floating Empty
Select · Floating Filled
Select · Top Label
Select · ohne sichtbares Label
Select · Readonly
neutral-10 · Pen-Slash statt Chevron
Select · Disabled
neutral-10 · gedämpfter Wert und Chevron
Select · Error
Select with Button · Default
Aktion ist im Empty-State nicht sichtbar.
Select with Button · Filled
Figma `8128:8124` · Bearbeiten-Aktion nur bei Filled.
Select with Chip · Zustandsmatrix
Die Select-Schale bleibt identisch; der Status wird durch die registrierte Chip-Primitive ergänzt.
Dokumentiert, nicht ausführbar: Die Figma-Varianten mit Left Label bleiben gesperrt, bis ein produktiver Einsatz belegt ist. Floating, Top und None sind die kanonischen Positionen.
4 · Dropdown-Listen und Open States
Option, Liste und Feldkomposition werden getrennt erklärt. Jede Liste übernimmt dynamisch die Breite ihres Selects; die Beispiele verwenden echte Controlled Selects und bleiben vollständig per Tastatur bedienbar.
dropdown-select-option
40 px · Default, Hover, Selected, Disabled
Dropdown-Anatomie
dropdown-select-list besteht aus 40-px-Optionen. dropdown-select-w-list verbindet Standardfeld und Liste mit s2. dropdown-select-floating-label-w-list verwendet 56 px und s3.
dropdown-select-list
Liste ohne Suche · Breite entspricht dem Select
dropdown-select-w-list
40-px-Feld mit geöffnetem Listenunterbaum
dropdown-select-floating-label-w-list
Empty + Open bleibt Empty
dropdown-select-list-w-search · Default
Suche filtert die sichtbaren Optionen.
dropdown-select-list-w-search · Gruppen
Subheadings strukturieren eine längere Liste.
dropdown-select-list-multiselect
Default und With subline verwenden dieselbe Multiselect-Primitive.
5 · Datum, Jahr, ListBox und Sprache
Diese Controls besitzen eigene Interaktionsmodelle und werden deshalb nicht als bloße Select-Varianten behandelt.
InputDate · Floating
56 px · Label Default
InputDate · ohne sichtbares Label
40 px · Label None
InputDate · Open
Kontrolliertes deutsches Kalenderraster
Yearpicker · Open
Dekade, Navigation und 2×5-Jahresraster
ListBox
Option: Default, Group, Hover, Selected
Language Select
110 px; der Open State leitet sich transparent vom Controlled Select ab.
6 · Spezialfelder und Editor
Search, Password, Slider, InputGroup und Editor ergänzen die Feldbasis um ein jeweils eigenes Verhalten. Alle sichtbaren Unterbäume stammen aus der Registry.
Search · Default
Weiße Pill auf neutral-10 · Empty
Search · Outline Filled · Dropdown
Radius 4 · Einsatz in Dropdowns und Listen
Search · Outline Filled · Pill
Figma 5457:6900 · Pill, Kontur und Reset
Password
Default, Open, Visible PW und Filled werden durch Fokus und Sichtbarkeitsaktion erreicht.
Slider · Single
Slider · Range Partially
Slider · Range Complete
InputGroup · Text
Statischer Präfix und Einheit
InputGroup · Icon
Figma `.input-group-content` · Icon und Text
Password Strength
Low, Medium und High werden im Password-Open-State durch Balken, Text und vier Kriterien kommuniziert.
Texteditor · Default
Texteditor · Filled
Die fachliche Editor-Schritt-Komposition bleibt bei Task Surfaces.
7 · Filterkompositionen
Die Filter-Page bleibt ein eigener Figma-Bereich. Hier werden FilterCard, FilterPopover und ihre Form-Primitives zusammengeführt, ohne einen einzelnen Fachstandard zur allgemeinen Softwarelogik zu erklären.
Produktnahe Verwendung: Bearbeitungsübersicht. Gemeinsame Filter-/Ergebnisbindung: Template-Kompositionen.
Filter-Open-States
Die vier Figma-Zustände der Project-Management-Filter verwenden dieselben Registry-Primitives wie das Popover.