Forms
Passwords and input masks
Add an accessible password reveal control, validation feedback, and declarative phone, date, and product-key masks.
Forms
Passwords and input masks
Password reveal and input formatting are optional controllers. The underlying inputs remain usable before JavaScript initializes.
Password reveal
HTML · Complete password field
<div class="bs-form-group" data-bs-password>
<label class="bs-label" for="password">Password</label>
<div class="bs-input-wrap">
<input
class="bs-input bs-input-has-icon-end"
id="password"
name="password"
type="password"
autocomplete="current-password"
data-bs-password-input
/>
<button
class="bs-input-action"
type="button"
data-bs-password-toggle
data-bs-password-show-label="Show password"
data-bs-password-hide-label="Hide password"
>
<span data-bs-password-label>Show password</span>
</button>
</div>
</div>JavaScript · Initialize password fields
import "@boobstrap/boobstrap";
import { initPasswords } from "@boobstrap/boobstrap/js/password";
const passwordFields = initPasswords(document);Invalid password state
HTML · Invalid password field
<div class="bs-form-group" data-bs-password>
<label class="bs-label" for="new-password">
New password <span class="bs-label-required" aria-hidden="true">*</span>
</label>
<div class="bs-input-wrap">
<input
class="bs-input bs-input-has-icon-end"
id="new-password"
name="new_password"
type="password"
value="simple"
aria-invalid="true"
aria-describedby="pw-error"
data-bs-password-input
required
/>
<button
class="bs-input-action"
type="button"
data-bs-password-toggle
data-bs-password-show-label="Show password"
data-bs-password-hide-label="Hide password"
>
<span data-bs-password-label>Show password</span>
</button>
</div>
<span class="bs-form-feedback bs-form-feedback-invalid" id="pw-error">
Password must be at least 12 characters and include numbers and symbols.
</span>
</div>Phone mask
HTML · Phone mask
<div class="bs-form-group">
<label class="bs-label" for="phone">Phone number</label>
<input
class="bs-input"
id="phone"
name="phone"
type="tel"
autocomplete="tel"
data-bs-mask="(999) 999-9999"
placeholder="(555) 555-0123"
/>
</div>Date mask
HTML · Date mask
<div class="bs-form-group">
<label class="bs-label" for="reference-date">Reference date</label>
<input class="bs-input" id="reference-date" name="reference_date" inputmode="numeric" data-bs-mask="99/99/9999" placeholder="MM/DD/YYYY" />
</div>Alphanumeric mask
HTML · Alphanumeric mask
<div class="bs-form-group">
<label class="bs-label" for="product-key">Product key</label>
<input class="bs-input" id="product-key" name="product_key" data-bs-mask="AAAA-9999-****" placeholder="ABCD-1234-E5F6" />
</div>JavaScript · Initialize input masks
import "@boobstrap/boobstrap";
import { initInputMasks } from "@boobstrap/boobstrap/js/input-mask";
const masks = initInputMasks(document);Mask tokens:
9 accepts a digit, A accepts a letter, and * accepts a letter or digit. A mask formats entry; it does not replace server-side validation.Passwords & Input Masks API
Password reveal actions, mask controllers, and error feedback elements format secure inputs and formatted strings.
| Class / Data Attribute | Purpose |
|---|---|
data-bs-password | Initializes the password reveal controller on the form group container. |
data-bs-password-input | Identifies the password input field whose visibility is toggled between password and text. |
data-bs-password-toggle | Button trigger that toggles password reveal state and updates ARIA pressed status. |
data-bs-password-label | Text element whose contents update between show and hide label strings. |
.bs-input-action | Interactive button positioned inside an input field wrapper. |
.bs-input-mask | Applies monospaced font and formatted spacing for masked text inputs. |
data-bs-mask | Defines the mask format pattern string (9 for digits, A for letters, * for alphanumeric). |
.bs-form-feedback-invalid | Error message text describing password complexity or formatting errors. |