Text Inputs

Usage

Visible labels are the desired pattern
Include matching for and id values unique to each label and input pair to associate the two
Use the appropriate type for inputs to trigger correct browser and mobile keyboard behavior
Use type="text" for a one line text input field
Use type="password" for a password field
Use type="email" for an email field
Use type="tel" for a telephone number field

As a general rule, the length of a field helps a user understand the length of the content you’re expecting them to enter
Placeholder text is not a replacement for a label
Text that is longer than the field can physically contain will not be visible
Only use a fieldset with legend to group associated inputs (e.g. multiple address inputs or credit card month/year inputs) or a set of radios or checkboxes. Some assistive tools will read the contents of the legend before each nested input to maintain context for a user. The last example above uses a legend within the fieldset. The legend is styled like a label.

Always include .label-help text when an input requires explanation for formatting or error correction
When using .label-help you should use aria-describedby on the element that the helper text applies to
Indicate that an input is required by adding the aria-required="true" attribute. By default this is false and does not need set unless it will be true.
An invalid input should include the aria-invalid="true" attribute

form-group Required	Use on the parent `<div>` or `<fieldset>` that surrounds the `<label>` and `<input>`
form-control Required	Apply to the `<textarea>` element
form-group-spacer Modifier	Use with `.form-group` to increase the space below the input
has-success Modifier	Use with the `.form-group` to flag the input as valid when using inline validation
has-warning Modifier	Use with the `.form-group` to flag the input as potentially invalid, it‘s recommended to include `.label-help` helper text to clarify the error
has-danger Modifier	Use on the `.form-group` to flag the input as error, it‘s recommended to include `.label-help` helper text to clarify the error
form-control-success Modifier	Use with the `.form-control` to apply a checkmark icon that matches the `$brand-success` color (the parent `.form-group` must have a feedback state class)
form-control-warning Modifier	Use with the `.form-control` to apply an alert icon that matches the `$brand-warning` color (the parent `.form-group` must have a feedback state class)
form-control-danger Modifier	Use with the `.form-control` to apply an alert icon that matches the `$brand-danger` color (the parent `.form-group` must have a feedback state class)
input-icon input-icon-* Modifier	Inputs can include leading icons by using these two classes where the latter class defines the icon for the specific instance