Inputfield

Examples


<label for="i0" class="label">Inputfield</label>
<input type="text" class="inputfield" id="i0"/>

    

<label for="i1" class="label">E-mail</label>
<input type="email" class="inputfield" id="i1"/>

    

<label for="i2" class="label">Password</label>
<input type="password" class="inputfield" id="i2"/>

    

<label for="i3" class="label">Date</label>
<input type="date" class="inputfield inputfield--date--placeholder" placeholder="13/05/1990" id="i3"/>

    

<label for="i4" class="label">Number</label>
<input type="number" class="inputfield" id="i4"/>

    

<label for="i5" class="label inputfield__icon--search">Search</label>
<input type="search" class="inputfield inputfield--search" id="i5"/>

    

<label for="i6" class="label">Url</label>
<input type="url" class="inputfield" id="i6"/>

    

<label for="i7" class="label">Disabled inputfield</label>
<input disabled type="text" class="inputfield" value="Disabled" id="i7"/>

    

<label for="i8" class="label">Inputfield with watermark</label>
<input type="text" class="inputfield" placeholder="Watermark" id="i8"/>

    

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


<label for="i9" class="label">Inputfield with hint text</label>
<input type="text" class="inputfield" id="i9" aria-describedby="i9"/>
<p class="hint" id="i9">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    

Introduction

The Groundhog input component visually enhances the standard html <input> element. It is used to handle user input. It is typically accompanied by a label above. Additionally, there can be a hint text underneath the input.

Including an input

  1. To include a Groundhog input add an <input> and a <label> element. Include the necessary text content.
    <label>Name</label>
    <input>
    
  2. Add the necessary Groundhog classes, ids and type to the elements.
    <label for="i0" class="label">Name</label>
    <input type="text" class="inputfield" id="i0"/>
    
  3. Add a hint text (optional)
    <label for="i1" class="label">Name</label>
    <input type="text" class="inputfield" id="i1"/>
    <p class="hint" id="i1">Hint text</p>
    

Available classes for button

class name effect
.inputfield Sets the styling for the input
.inputfield--date--placeholder Sets the styling for date watermarks
.inputfield--search Sets the styling for search inputs
.hint Sets the styling for the hint text
.label Sets the label styling
.hint Sets the styling for the hint text