Text Input v0.16.0+

The Text Input component provides markup to define a single-line text control.

Basic Text Input

Label Annotation
Control Options

(Invalid styling applied after user interaction.)

Optional Text
Username should not be empty 

<hx-text-control>
  <input
    id="txtDemo"
    type="text"
  />
  <label
    for="txtDemo">
    Username
  </label>
  <p class="hxHelpText" hidden>
    Please enter username.
  </p>
  <p class="hxErrorText" hidden>
    <hx-error>
        Username should not be empty
    </hx-error>
  </p>
</hx-text-control>

The <input> element must have the type="text" attribute, in order for CSS styles to apply.

Prefixed

@ 
<hx-text-control>
  <input
    id="txtTwitterHandle"
    type="text"
  />
  <label for="txtTwitterHandle">
    Twitter Handle
  </label>
  <span class="hxPrefix">
    @
  </span>
</hx-text-control>

Suffixed

.example.com 
<hx-text-control>
  <input
    id="txtSubdomain"
    type="text"
  />
  <label for="txtSubdomain">
    Subdomain
  </label>
  <span class="hxSuffix">
    .example.com
  </span>
</hx-text-control>

See Also