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.

Standard

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

Guidelines

  • 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.

Info

Make sure you choose an awesome username.
Username is a required field.
Passwords should be 8 or more characters with at least one number and one symbol.
Passwords should be 8 or more characters with at least one number and one symbol.
Container(s) .input-text-wrap
Modifiers .is-required .is-error .is-disabled .is-valid .is-invalid .danger
HTML Elements span.input-info

Search

Search for "whitelabel"

  • Whitelabels are cool
  • Really, really long title about whitelabels
  • Whitelabels are nifty
Container(s) .input-text-wrap
Required .is-search
HTML Elements div.input-search-results

Tooltip

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

Units

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

Large

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

Textarea

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