fr1nge.xyz/themes/after-dark/docs/content/shortcode/form-group.md

+++ title = "Form Group" description = "Use with Label to visualize control validation states." categories = ["experience"] tags = ["form"] html_attributes = ["disabled", "form", "name", "class", "legend", "body"] custom_attributes = ["hastextarea", "state"] snippets_used = ["label", "text input", "text area", "help block"] copyright owner = "Josh Habdas" date = "2019" license = "agpl-3.0-or-later" +++

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 */>}}

{{< 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 >}}

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 */>}}

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