Inputfield

In groundhog since v0.1.1

Examples

Inputfield


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

E-mail


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

Password


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

Date


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

Number


<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"/>

Url


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

Disabled inputfield


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

Inputfield with watermark


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

Inputfield with hint text

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="i10"/>
<p class="hint" id="i10">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

To include a Groundhog input add an <input> and a <label> element. Include the necessary text content.
```
<label>Name</label>
<input>
```

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"/>

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