Text Input

Add a single-line plain-text editing control.
HTML attributes:
autocomplete,
autofocus,
class,
disabled,
form,
formaction,
formmethod,
formtarget,
height,
id,
max,
maxlength,
min,
minlength,
multiple,
name,
pattern,
placeholder,
readonly,
required,
size,
spellcheck,
step,
tabindex,
type,
value,
width
Custom attributes:
None available

Basic usage:

{{< hackcss-textinput >}}
{{< hackcss-textinput type="password" >}}
{{< hackcss-textinput type="email" placeholder="Please enter your email…" >}}
{{< hackcss-textinput disabled="true" placeholder="Disabled" >}}

With Label and Help Block in Form with custom validation:

{{< hackcss-form >}}
  {{< hackcss-label >}}
    {{< hackcss-helpblock text="Enter your Associate Tag:" />}}
    {{< hackcss-textinput name="AssociateTag" required="true" pattern="^\b\w*\b-20$" placeholder="associate-20" >}}
  {{< /hackcss-label >}}
{{< /hackcss-form >}}

In Form Group with warning Label and Help Block:

{{< hackcss-formgroup state="warning" >}}
  {{< hackcss-label for="key64" text="64-bit PGP key:" />}}
  {{< hackcss-textinput spellcheck="false" type="text" id="key64" >}}
  {{< hackcss-helpblock text="In this format: BB73 67EE 9A70 A631" />}}
{{< /hackcss-formgroup >}}
In this format: BB73 67EE 9A70 A631

Typed with Label in Form Group targeting Form owner:

{{< hackcss-form id="search" action="/search" />}}
{{< hackcss-formgroup >}}
  {{< hackcss-label for="query" text="Search query:" />}}
  {{< hackcss-textinput type="search" id="query" form="search" >}}
{{< /hackcss-formgroup >}}