Forms
Inputs and textareas
Build labeled text controls with help text, validation feedback, disabled and read-only states, and three sizes.
Forms
Inputs and textareas
Use a form group to keep each visible label, control, help message, and validation message together.
Email input with helper text
Used for receipts and account recovery.
HTML · Email input
<div class="bs-form-group">
<label class="bs-label" for="email">Email address <span class="bs-label-required" aria-hidden="true">*</span></label>
<input class="bs-input" id="email" name="email" type="email" autocomplete="email" aria-describedby="email-help" required />
<span class="bs-form-text" id="email-help">Used for receipts and account recovery.</span>
</div>Textarea
Include your launch date and expected traffic.
HTML · Textarea
<div class="bs-form-group">
<label class="bs-label" for="message">Project details</label>
<textarea class="bs-textarea" id="message" name="message" rows="4" aria-describedby="message-help"></textarea>
<span class="bs-form-text" id="message-help">Include your launch date and expected traffic.</span>
</div>Input sizes
HTML · Input sizes
<input class="bs-input bs-input-sm" aria-label="Small input" />
<input class="bs-input" aria-label="Default input" />
<input class="bs-input bs-input-lg" aria-label="Large input" />Valid input
This username is available.
HTML · Valid input
<div class="bs-form-group">
<label class="bs-label" for="username">Username</label>
<input class="bs-input" id="username" aria-invalid="false" aria-describedby="username-feedback" />
<span class="bs-form-feedback bs-form-feedback-valid" id="username-feedback">This username is available.</span>
</div>Invalid input
Enter a complete URL including https://.
HTML · Invalid input
<div class="bs-form-group">
<label class="bs-label" for="website">Website</label>
<input class="bs-input" id="website" aria-invalid="true" aria-describedby="website-feedback" />
<span class="bs-form-feedback bs-form-feedback-invalid" id="website-feedback">Enter a complete URL including https://.</span>
</div>Read-only input
HTML · Read-only input
<label class="bs-label" for="account-id">Account ID</label>
<input class="bs-input" id="account-id" value="acct_01HX" readonly />Disabled input
HTML · Disabled input
<label class="bs-label" for="unavailable">Unavailable value</label>
<input class="bs-input" id="unavailable" value="Unavailable" disabled />Labels
Use a visible <label> whose for matches the control ID. Required and optional markers supplement the label; the native required attribute remains the actual constraint.
Feedback
Connect help and error text with aria-describedby. Set aria-invalid="true" only after validation determines the current value is invalid.
Types
Keep meaningful native types and autocomplete values so browsers can provide keyboards, autofill, validation, and password-manager support.