Label
Provide accessible captions for form controls.
for
, form
text
Explicit label association with Text Input:
{{< 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 >}}
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 >}}
See Form Group for additional control states.