Inputs

Form input controls like <input> and <textarea>. These fields will allow users to submit short and long form text input.

Default Inputs

Default state of form elements.

<div class="mb-3">
	<label class="form-label" for="formText">Input Label</label>
	<input type="text" class="form-control" id="formText" placeholder="Placeholder..." >
	<div class="form-text">Additional Info</div>
</div>
<div class="mb-3">
	<label class="form-label" for="formTextarea">Input Label</label>
	<textarea class="form-control" id="formTextarea" rows="3" placeholder="Placeholder..."></textarea>
	<div class="form-text">Additional Info</div>
</div>

Validation and Errors

<div class="mb-3">
    <label class="form-label" for="formTextInvalid">Input Validation</label>
    <input type="text" class="form-control is-invalid" id="formTextInvalid" placeholder="Placeholder..." >
    <div class="invalid-feedback">Validation error message text</div>
</div>
<div class="mb-3">
    <label class="form-label" for="formTextareaInvalid">Input Validation</label>
    <textarea class="form-control is-invalid" id="formTextareaInvalid" rows="3" placeholder="Placeholder..."></textarea>
    <div class="invalid-feedback">Validation error message text</div>
</div>

Disabled Fields

<div class="mb-3">
    <label class="form-label" htmlFor="formTextDisabled">Input Disabled</label>
    <input type="text" class="form-control" id="formTextDisabled" placeholder="Placeholder..." disabled >
    <div class="form-text">Additional Info</div>
</div>
<div class="mb-3">
    <label class="form-label" for="formTextareaDisabled">Input Disabled</label>
    <textarea class="form-control" id="formTextareaDisabled" rows="3" placeholder="Placeholder..." disabled></textarea>
    <div class="form-text">Additional Info</div>
</div>

Accessibility

Make it clear what this input does for the user.

What to do with inputs

DON'T

What not to do with inputs