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

+++ title = "Label" description = "Provide accessible captions for form controls." categories = ["experience"] tags = [] html_attributes = ["for", "form"] custom_attributes = ["text"] snippets_used = ["label", "text input", "form group", "help block"] copyright owner = "Josh Habdas" date = "2019" license = "agpl-3.0-or-later" +++

Explicit label association with Text Input:

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

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

Implicit label association using Text Input and Help Block:

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

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

Combined with Form Group to show Text Input success state:

{{</* hackcss-formgroup state="success" >}}
  {{< hackcss-label for="fullname" text="Full Name:" />}}
  {{< hackcss-textinput id="fullname" value="Edgar Allan Poe" required="true" >}}
{{< /hackcss-formgroup */>}}

{{< hackcss-formgroup state="success" >}} {{< hackcss-label for="fullname" text="Full Name:" />}} {{< hackcss-textinput id="fullname" value="Edgar Allan Poe" required="true" >}} {{< /hackcss-formgroup >}}

See Form Group for additional control states.