Text Fields

Text fields allow users to enter, and select text within a field. Text fields can also lookup data via auto-completion, such as a search field.


Container(s) .input-text-wrap
Modifiers .is-required .is-error .is-disabled
States .is-focused .has-value


  • Labels should be title case and ≤ 20 characters.
  • Info hint and error text should be sentence case and ≤ 90 characters.
  • Info hint and error text should be used to coach the user about valid input, but should not act as a replacement for input masking and validation.
  • Ensure label is raised when field is pre-populated or autofilled by the browser.
  • Prefer field-level error messages when checking for presence and format of data
Don't use long labels.
Don't allow autofilled content to overlap the label.


Make sure you choose an awesome username.
Username is a required field.
Container(s) .input-text-wrap
Modifiers .is-required .is-error .danger
HTML Elements span.input-info


Container(s) .input-text-wrap
HTML Elements div.input-info-tooltip


Container(s) .input-text-wrap
Required .has-units [data-units]="unit"
Modifiers .has-arrow-top .has-arrow-right .has-arrow-bottom .has-arrow-left .is-required .is-error .is-disabled
States .is-focused .has-value


Container(s) .input-text-wrap
Required .is-large


Please enter the details of your request.
Container(s) .textarea-wrap
Modifiers .is-required .is-error .is-disabled .is-scrollable
States .is-focused .has-value