# 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

Username
Username
Username

Container(s) | .input-text-wrap
Modifiers | .is-required .is-error .is-disabled
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

Username Make sure you choose an awesome username.
Username Username is a required field.

Container(s) | .input-text-wrap
Modifiers | .is-required .is-error .danger
HTML Elements | span.input-info

# Search

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

CCV

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-arrow-top .has-arrow-right .has-arrow-bottom .has-arrow-left .is-required .is-error .is-disabled
States | .is-focused .has-value

# Large

Campaign Name

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

# Textarea

Description
Description Please enter the details of your request.
Description

Container(s) | .textarea-wrap
Modifiers | .is-required .is-error .is-disabled .is-scrollable
States | .is-focused .has-value