Inputs
Build labeled text controls with helper text, validation feedback, read-only and disabled states, and three responsive sizes.
Inputs
The .bs-input class styles native text, email, password, url, search, number, and telephone inputs with accessible focus rings, theme tokens, and sizing utilities.
Email input with helper text
<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>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
<div class="bs-form-group">
<label class="bs-label" for="username">Username</label>
<input class="bs-input bs-is-valid" id="username" value="ada-lovelace" 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
<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
<label class="bs-label" for="account-id">Account ID</label>
<input class="bs-input" id="account-id" value="acct_01HX" readonly />Disabled input
<label class="bs-label" for="unavailable">Unavailable value</label>
<input class="bs-input" id="unavailable" value="Unavailable" disabled />Flush and borderless inputs
Use .bs-input-flush or .bs-input-borderless when inputs are embedded directly into cards, toolbars, headers, or table rows without outer border chrome.
<input class="bs-input bs-input-flush" type="search" placeholder="Type to filter..." />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.
Inputs API
Single-line input classes provide accessible heights, surface colors, validation feedback, and embedding utilities.
| Class | Purpose |
|---|---|
.bs-input | Base text input layout, border, padding, theme background, focus ring, and typography. |
.bs-input-sm | Compact input sizing (2.25rem height) for dense forms and toolbars. |
.bs-input-lg | Large input sizing (3.25rem height) for prominent search bars or hero forms. |
.bs-input-flush | Removes outer border and padding for seamless embedding in tables, headers, and cards. |
.bs-input-borderless | Removes border outline while maintaining standard control sizing and padding. |
.bs-is-valid | Explicit positive validation state with green border, focus ring, and icon accent. |
.bs-is-invalid | Explicit negative validation state with danger border, focus ring, and icon accent. |
.bs-form-group | Vertical grid grouping a label, control, helper text, and feedback messages. |
.bs-label | Associated control label with baseline alignment and bold typography. |
.bs-form-text | Muted descriptive helper text placed below or beside a control. |
.bs-form-feedback-valid | Success message displayed when validation requirements are met. |
.bs-form-feedback-invalid | Error message displayed when validation fails or constraints are violated. |