Float Container

.c-float-container

TIP

The Float Container is a wrapper for new form elements like Input Fields, Textareas or Selects. It provides the "Floating Label" styling and can be combined with Buttons or Checkboxes. See Input Group for more complex examples.

Float Container Example

INFO

Float Container with Label

Float Container with Active Label

Float Container with very long label description text-overflow example

Float Container Hint

TIP

The hint text is optional and can be used to provide additional information about the input field.

.c-float-container + .c-float-container__hint or
.c-float-container > .c-float-container__hint

INFO

Input with Hint

This is an optional hint.

Input with Hint This is an optional hint as child element.

Error Input with Hint Message

This is an optional error hint.

Warning Input

This is an optional warning hint.

Success Input

This is an optional success hint.

Validation Messages in Comparison

See Form for more information about form validation.

INFO

Input with Hint

This is an optional hint.

Following Input

Input with Hint This is an optional hint.

Following Input

• Dies ist ein Pflichtfeld.

Nachname*

Following Input

Name*Dies ist ein Pflichtfeld!

Following Input

Hiermit bestätige ich, dass ich die AGB akzeptiere.

• Bitte lesen und akzeptieren Sie unsere AGB und Datenschutzrichtlinien

Fachkreise (§§ 3, 10 HWG): Hiermit bestätige ich, dass ich zu den Fachkreisen gehöre (z.B. Pharmazie-Student, -Praktikant, Apotheker, Pharm. Personal, Mediziner oder sonstiger Heilberufler)

• Die Inhalte auf pharma4u richten sich ausschließlich an Heilberufler. Sie müssen den pharmazeutisch-medizinischen Fachkreisen angehören.

Settings and API

The Floating-Label functionality is handled in the Form-Module.

TIP

Initializes the Form Module with or without custom settings and registers Event-Listeners:
Form.init(settings: object);

Activate Float:
Form.activateFloat(element: Node);

Deactivate Float:
Form.deactivateFloat(element: Node);

Activate disabled button:
Form.activateInlineBtn(button: Node);