Text Input v0.16.0+ HelixUI v0.16.0 or later required

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

{{helpText}}

{{errorText}}

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