labelsto indicate the type of information required. Labels should always be above the field and aligned to the left.
- Include placeholder copy to help the user understand how they should use the field. Alternatively, placeholder copy could function as an example of the text expected.
- Add helper copy where further clarification or rationale is required. It should always be below the field and aligned to the left.
If your text field requires specific formatting (such as character limits, valid email addresses, or phone numbers), try to prevent user error by only accepting certain values and using the correct input
How it works
Textual form controls—like
<textarea>s—are styled with the
.form-control class. Included are styles for general appearance, focus state, sizing, and more.
Set heights using classes like
In most cases the default sized form components should be used. Smaller sizing could be used in instances where there are space limitations or the form is not the main action on the page (a form within the footer or sidebar for instance).
readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
Read-only plain text
If you want to have
<input readonly> elements in your form styled as plain text, use the
.form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.