Float Container
.c-float-container
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
Show Code
html
<div class="grid">
<div class="col">
<div class="c-float-container -has-input">
<label class="c-label" for="input-example">Float Container with Label</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-example" name="" value="" />
</div>
</div>
<div class="col">
<div class="c-float-container -has-input -is-active">
<label class="c-label" for="input-example">Float Container with Active Label</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-example" name="" value="" />
</div>
</div>
<div class="col">
<div class="c-float-container -has-input m-y-reset print-no-bg print-m-b-xl -has-changed">
<label class="c-label -redesign" for="unterschrift">Float Container with very long label description text-overflow example </label>
<input class="c-input" type="text" id="unterschrift" value="">
</div>
</div>
</div>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
This is an optional hint.
This is an optional hint as child element.
This is an optional error hint.
This is an optional warning hint.
This is an optional success hint.
Show Code
html
<div class="h-flex h-flex-column">
<div class="col">
<div class="c-float-container -has-input">
<label class="c-label" for="input-hint">Input with Hint</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-hint" name="" value="Default value" />
</div>
<span class="c-float-container__hint">
This is an optional hint.
</span>
</div>
<div class="col">
<div class="c-float-container -has-input">
<label class="c-label" for="input-hint2">Input with Hint</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-hint2" name="" value="Default value" />
<span class="c-float-container__hint">
This is an optional hint as child element.
</span>
</div>
</div>
<div class="col">
<div class="c-float-container">
<label class="c-label" for="input-example">Error Input with Hint Message</label>
<input type="text" class="c-input -error" data-placeholder=".. and Placeholder Text" id="input-example" name="" value="" />
</div>
<span class="c-float-container__hint">
This is an optional error hint.
</span>
</div>
<div class="col">
<div class="c-float-container">
<label class="c-label" for="input-example">Warning Input</label>
<input type="text" class="c-input -warning" data-placeholder=".. and Placeholder Text" id="input-example" name="" value="" />
</div>
<span class="c-float-container__hint">
This is an optional warning hint.
</span>
</div>
<div class="col">
<div class="c-float-container">
<label class="c-label" for="input-example">Success Input</label>
<input type="text" class="c-input -success" data-placeholder=".. and Placeholder Text" id="input-example" name="" value="" />
</div>
<span class="c-float-container__hint">
This is an optional success hint.
</span>
</div>
</div>Validation Messages in Comparison
See Form for more information about form validation.
This is an optional hint.
This is an optional hint with longer content.
- Dies ist ein Pflichtfeld.
Dies ist ein Pflichtfeld!
Show Code
html
<div class="grid">
<div class="col">
<div class="c-float-container -has-input">
<label class="c-label" for="input-hint-ex1">Input with Hint</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-hint-ex1" name="" value="Default value" />
</div>
<span class="c-float-container__hint">
This is an optional hint.
</span>
<div class="c-float-container -has-input">
<label class="c-label" for="input-hint-ex2">Following Input</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-hint-ex2" name="" value="Default value" />
</div>
</div>
<div class="col">
<div class="c-float-container -has-input">
<label class="c-label" for="input-hint2">Input with Hint</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-hint2" name="" value="Default value" />
<span class="c-float-container__hint">
This is an optional hint with longer content.
</span>
</div>
<div class="c-float-container -has-input">
<label class="c-label" for="input-f5">Following Input</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-f5" name="" value="Default value" />
</div>
</div>
<div class="col">
<div class="c-float-container -has-input -light parsley-error">
<div id="errorlastName" class="errorHolder"><ul class="parsley-errors-list filled" id="parsley-id-3150"><li class="parsley-required">Dies ist ein Pflichtfeld.</li></ul></div>
<label class="c-label" for="parsley">
Nachname*
</label>
<input data-parsley-errors-container="#errorlastName" required="" data-parsley-minlength="2" data-parsley-minlength-message="Bitte tragen Sie mindestens 2 Zeichen ein" data-parsley-trigger="focusout" data-parsley-group="block1" class="c-input" id="parsley" type="text" name="parsley" data-parsley-id="3150">
</div>
<div class="c-float-container -has-input">
<label class="c-label" for="input-f1">Following Input</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-f1" name="" value="Default value" />
</div>
</div>
<div class="col">
<div class="c-float-container -has-input">
<label class="c-label" for="powermail">Name*</label>
<span class="error-msg">Dies ist ein Pflichtfeld!</span>
<input type="text" class="c-input" name="name" id="powermail">
</div>
<div class="c-float-container -has-input">
<label class="c-label" for="input-f2">Following Input</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-f2" name="" value="Default value" />
</div>
</div>
</div>
<div>
<div class="c-float-container -has-checkbox">
<div class="c-checkbox parsley-error">
<input data-parsley-errors-container="#erroragb" required="" data-parsley-group="block4" id="agb" type="checkbox" value="1" >
<label class="c-label" for="agb">
Hiermit bestätige ich, dass ich die
<a target="_blank" href="allgemein/agbs/">AGB</a>
akzeptiere.
</label>
</div>
<div id="erroragb" class="errorHolder"><ul class="parsley-errors-list filled" id="parsley-id-multiple-tx_registration_basenewFrontendUseragb"><li class="parsley-custom-error-message"><p>Bitte lesen und akzeptieren Sie unsere AGB und Datenschutzrichtlinien</p></li></ul></div>
</div>
<div class="c-float-container -has-checkbox">
<div class="c-checkbox parsley-error">
<input id="fachkreise" type="checkbox" value="1" data-parsley-multiple="tx_registration_basenewFrontendUserfachkreise" data-parsley-id="6522" placeholder="">
<label class="c-label" for="fachkreise">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)</label>
</div>
<div id="errorfachkreise" class="errorHolder">
<ul class="parsley-errors-list filled">
<li class="parsley-custom-error-message"><p>Die Inhalte auf pharma4u richten sich ausschließlich an Heilberufler. Sie müssen den pharmazeutisch-medizinischen Fachkreisen angehören.</p></li>
</ul>
</div>
</div>
</div>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);