Formular Material

Grid

Es gibt nicht viele Regeln für die Nutzung des Formular Patterns. Ihr müsst nur ein paar Punkte einhalten. Der wichtigste ist der Abstand zwischen den Formularfeldern. Nach unten beträgt er 24px und zur Seite beträgt er 8px.

Verhältnis zwischen Formularfeldern nebeneinander z.B. 2-3, 1-4 entscheiden die FT-Teams selber.

Hinweiskommunikation und Formularfelder. Bei einer Hinweiskommunikation, die sich auf die Eingabe der Felder bezieht, steht die Hinweiskommunikation direkt über den Feldern. Globale Hinweiskommunikation steht direkt unter der Überschrift der Seite, das sind z.B. Hinweise zu einem technischen Fehler oder allgemeine Erfolgsmeldungen.

Es gilt das Responsive Grid wie für alle Designs. Es gibt kein spezielles Grid für das Formular Pattern. Viel Spaß beim Designen!

Hinweis

Geburtsdatum

Checkbox

Checkbox leer

Checkbox gefüllt

Checkbox leer mit Fehler und Hinweis

Ich bin ein Fehlerhinweis

Checkbox leer mit Fehler

Checkbox ohne Label

Checkbox leer disabled

Ich bin ein Hinweis

Radio Button

Radio Button

Radio Button gefüllt

Radio Button mit Fehler und Hinweis

Ich bin ein Fehlerhinweis

Radio Button mit Fehler

Radio Button ohne Label

Radio Button disabled

Ich bin ein Hinweis

Input

Ich bin eine Autotab Gruppe

Geburtsdatum (nur Ganzzahlen erlaubt)

Ich bin ein leeres Standard-Textfeld

Ich bin ein leeres Standard-Textfeld mit Hinweis

Ich bin ein Hinweis

Ich bin ein Standard-Textfeld

Ich bin ein Hinweis

Ich bin ein fehlerhaftes Textfeld

Ich bin ein Hinweis

Ich bin ein leeres, fehlerhaftes Textfeld

Ich bin ein leeres, fehlerhaftes Error-Textfeld

Ich bin ein Hinweis

Ich bin ein erfolgreiches Textfeld

Ich bin ein Hinweis

Ich bin ein warnendes Textfeld

Ich bin ein Hinweis

Ich bin ein Textfeld ohne Label

Ich bin ein Textfeld mit Max-Counter!

Ich bin ein Textfeld mit Min-Counter!

Ich bin ein Nummernfeld mit Counter!

Ich bin ein Hinweis

Ich bin ein Textfeld mit separatem Placeholder

Ich bin ein leeres, disabled Textfeld

Ich bin ein Hinweis

Ich bin ein prefix Textfeld

Ich bin ein Hinweis

Ich bin suffix Textfeld

Ich bin prefix Textfeld mit Text

cm

Ich bin suffix Textfeld mit Text

cm

Ich bin pre/suffix Textfeld

Dropdown

Dropdown

Hinweis

Dropdown invalid

invalider Hinweis

Dropdown Multiple

Dropdown Multiple With Legend

Geburtsdatum

Dropdown disabled

Ich bin ein Hinweis

Textarea

Ich bin eine leere Textarea

Ich bin eine leere Textarea mit Hinweis

Ich bin ein Hinweis

Ich bin eine Textarea

Ich bin ein Hinweis

Ich bin eine fehlerhafte Textarea

Ich bin ein Hinweis

Ich bin eine leere, fehlerhafte Textarea

Ich bin eine leere, fehlerhafte Textarea mit Hinweis

Ich bin ein Hinweis

Ich bin ein erfolgreiche Textarea

Ich bin ein Hinweis

Ich bin eine warnende Textarea

Ich bin ein Hinweis

Ich bin eine Textarea mit maximaler Zeichenlänge ohne Hinweis

Ich bin eine Textarea mit maximaler Zeichenlänge und langem Hinweis

Ich bin ein Hinweis und ich bin ziemlich lang. Deshalb werde ich mit großer Wahrscheinlichkeit in die nächste Zeile umbrechen. Oder?

Ich bin eine Textarea mit maximaler Zeichenlänge und Fehler

Ich bin ein Hinweis

Ich bin eine Textarea mit minimaler Zeichenlänge

Ich bin ein Hinweis

Textarea mit minimaler Zeichenlänge und Fehler

Ich bin ein Hinweis

Textarea disabled

Ich bin ein Hinweis

Counter

Der Counter kann an den Elementen pl_input und pl_textarea verwendet werden. Er ist nicht als eigenständiges Pattern vorgesehen, sondern wird immer als Ergänzung eingesetzt. Für dynamisch erstellte Elemente kann der Counter über den EventQBus initialisiert werden. Hierzu wird das Event "assets.formular.counter" mit einem entsprechendem, möglichst spezifischem (!), Query-Selector abgesetzt, da ansonsten Counter doppelt initialisiert und angezeigt werden.

Input Beispiel

Erklärender Text

⭐️ Slider

Design documentation for this module will follow shortly. Please take a look at the code/technical documentation for config options.

Linear Scale

Logarithmic Scale

Für dieses Pattern ist kein Konfigurator verfügbar!

Technische Hinweise

Für dieses Pattern sind keine technischen Hinweise vorhanden!