Text Inputs
Definition
If text exceeds more than one line, use the text area component. The larger field size encourages longer responses.
Description
It's typically used for comments or questions in forms.
Component Example(s) with Code
Help text goes here
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Expandable Input field Label</label>
<p class="help-text">Help text goes here</p>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
Help text goes here
Reviewer comments:
Comment 2 (Agency name): comment goes here
<div class="mb-3">
<label for="exampleFormControlTextarea2" class="form-label">Expandable Input field Label with Reviewer Comments</label>
<p class="help-text">Help text goes here</p>
<p class="input-comment-label">Reviewer comments:</p>
<p class="input-comment">Comment 2 (Agency name): comment goes here</p>
<textarea class="form-control" id="exampleFormControlTextarea2" rows="3"></textarea>
</div>
Accessibility Considerations
-
Make sure that the labels are associated with the input:
The value of the "for" attribute in the label should match the value of the "id" attribute of the form element -
If the field is required add
aria-required="true"to the input tag
Variables
CSS Custom Properties
.input-comment-label {
font-size: 0.875rem;
font-weight: 700;
margin-bottom:.5rem;
}
.input-comment {
color: $danger;
font-size: 0.875rem;
margin-bottom:.5rem;
}
Definition
For single-line, short entries, use the text input component.
Description
It's commonly used for name, phone number, or email entries in forms.
Component Example(s) with Code
<div class="mb-3">
<label for="shortInputfield" class="form-label">Short Manual Input field label with required marker <sup class="required-star">*</sup></label>
<input type="text" class="form-control" id="shortInputfield" aria-required="true">
</div>
Help text goes here
<div class="mb-3">
<label for="shortInputfield2" class="form-label">Short Manual Input field label With Help text <sup class="required-star">*</sup></label>
<p class="help-text">Help text goes here</p>
<input type="text" class="form-control" id="shortInputfield2" aria-required="true">
</div>
<div class="mb-3">
<label for="shortInputfield3" class="form-label">Short Manual Input field label Disabled</label>
<input type="text" class="form-control" id="shortInputfield3" disabled>
</div>
Help text goes here
Error message goes here
<div class="mb-3">
<label for="shortInputfield4" class="form-label">Short Manual Input field label With just Error Message <sup class="required-star">*</sup></label>
<p class="help-text">Help text goes here</p>
<input type="text" class="form-control" id="shortInputfield4" aria-required="true">
<div class="d-flex justify-content-start">
<p class="error-text">Error message goes here</p>
</div>
</div>
Help text goes here
0/200 chars
<div class="mb-3">
<label for="shortInputfield5" class="form-label">Short Manual Input field label With just Counter</label>
<p class="help-text">Help text goes here</p>
<input type="text" class="form-control" id="shortInputfield5">
<div class="d-flex justify-content-end">
<p class="counter " id="counter">0/200 chars</p>
</div>
</div>
Help text goes here
Error message goes here
0/200 chars
<div class="mb-3">
<label for="shortInputfield6" class="form-label">Short Manual Input field label With Error Message and Counter <sup class="required-star">*</sup></label>
<p class="help-text">Help text goes here</p>
<input type="text" class="form-control" id="shortInputfield6" aria-required="true">
<div class="d-flex justify-content-between">
<p class="error-text">Error message goes here</p>
<p class="counter" id="counter">0/200 chars</p>
</div>
</div>
Accessibility Considerations
-
Make sure that the labels are associated with the input:
The value of the "for" attribute in the label should match the value of the "id" attribute of the form element -
If the field is required add
aria-required="true"to the input tag
Variables
CSS Custom Properties
input,
textarea {
&.form-control {
border-radius: 0.25rem;
&:focus {
border: 1px solid $grey-500;
box-shadow: 0 4px 4px rgba($grey-500, 15%);
}
}
}
.help-text {
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
label {
&.regular,
&.form-label {
font-weight: 700;
font-size: 1.125rem;
}
& > abbr,
& > .required-star {
color: $danger;
}
}
<div class="mb-3">
<label for="emailExample" class="form-label">Email address</label>
<input type="email" class="form-control" id="emailExample">
</div>