Inputs

Default Input

Default state of form elements.

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>

Disabled Input

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>

Error Input

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>

Accessibility

Make it clear what this input does for the user.

Classes

Complete list of all CSS classes for the component.