Form Group

Use with Label to visualize control validation states.

HTML attributes:

body,

class,

disabled,

form,

legend,

name

Custom attributes:

hastextarea,

state

Label states with Text Input:

{{< hackcss-formgroup >}}
  {{< hackcss-label for="default" text="Default:" />}}
  {{< hackcss-textinput id="default" >}}
{{< /hackcss-formgroup >}}

{{< hackcss-formgroup state="success" >}}
  {{< hackcss-label for="success" text="Success:" />}}
  {{< hackcss-textinput id="success" >}}
{{< /hackcss-formgroup >}}

{{< hackcss-formgroup state="warning" >}}
  {{< hackcss-label for="warning" text="Warning:" />}}
  {{< hackcss-textinput id="warning" >}}
{{< /hackcss-formgroup >}}

{{< hackcss-formgroup state="error" >}}
  {{< hackcss-label for="error" text="Error:" />}}
  {{< hackcss-textinput id="error" >}}
{{< /hackcss-formgroup >}}

Default:

Success:

Warning:

Error:

Disabling Label and disabled Text Area with Help Block:

{{< hackcss-formgroup hastextarea="true" disabled="true" >}}
  {{< hackcss-helpblock >}}<strong>Sorry! Guestbook offline…</strong>{{< /hackcss-helpblock >}}
  {{< hackcss-label for="message" text="Message:" />}}
  {{< hackcss-textarea id="message" rows="10" >}}
{{< /hackcss-formgroup >}}

Sorry! Guestbook offline…

Message: