Inputs
Form input controls like <input> and <textarea>. These fields will allow users to submit short and long form text input.
Default Inputs
The Default Input description from Figma goes here
1<div class="mb-3">
2 <label class="form-label" for="formText">Input Label</label>
3 <input type="text" class="form-control" id="formText" placeholder="Placeholder..." >
4 <div class="form-text">Additional Info</div>
5</div>
6<div class="mb-3">
7 <label class="form-label" for="formTextarea">Input Label</label>
8 <textarea class="form-control" id="formTextarea" rows="3" placeholder="Placeholder..."></textarea>
9 <div class="form-text">Additional Info</div>
10</div>Validation and Errors
The Error Input description from Figma goes here
1<div class="mb-3">
2 <label class="form-label" for="formTextInvalid">Input Validation</label>
3 <input type="text" class="form-control is-invalid" id="formTextInvalid" placeholder="Placeholder..." >
4 <div class="invalid-feedback">Validation error message text</div>
5</div>
6<div class="mb-3">
7 <label class="form-label" for="formTextareaInvalid">Input Validation</label>
8 <textarea class="form-control is-invalid" id="formTextareaInvalid" rows="3" placeholder="Placeholder..."></textarea>
9 <div class="invalid-feedback">Validation error message text</div>
10</div>Disabled Fields
The Disabled Input description from Figma goes here
1<div class="mb-3">
2 <label class="form-label" htmlFor="formTextDisabled">Input Disabled</label>
3 <input type="text" class="form-control" id="formTextDisabled" placeholder="Placeholder..." disabled >
4 <div class="form-text">Additional Info</div>
5</div>
6<div class="mb-3">
7 <label class="form-label" for="formTextareaDisabled">Input Disabled</label>
8 <textarea class="form-control" id="formTextareaDisabled" rows="3" placeholder="Placeholder..." disabled></textarea>
9 <div class="form-text">Additional Info</div>
10</div>Accessibility
Make it clear what this input does for the user.
-
What to do with inputs
What not to do with inputs