Text inputs and textareas are the backbone of every form. These examples cover labels, help text, sizes, read-only and disabled states, counters, colour and datalist inputs - all styled with the template theme.
1Text input with help text
A labelled text field with a short hint linked through aria-describedby.
Shown on invoices and in your public profile.
<div class="mb-3">
<label for="full-name-1" class="form-label">Full name</label>
<input type="text" class="form-control" id="full-name-1" placeholder="Nora Brennan" autocomplete="name" aria-describedby="full-name-help-2">
<div id="full-name-help-2" class="form-text">
Shown on invoices and in your public profile.
</div>
</div>2Sign-up fields
Email and password inputs with the right types and autocomplete hints for password managers.
<form class="row g-3" style="max-width: 28rem;">
<div class="col-12">
<label for="signup-email-3" class="form-label">Work email</label>
<input type="email" class="form-control" id="signup-email-3" placeholder="nora.brennan@example.com" autocomplete="email">
</div>
<div class="col-12">
<label for="signup-password-4" class="form-label">Password</label>
<input type="password" class="form-control" id="signup-password-4" autocomplete="new-password" aria-describedby="signup-password-help-5">
<div id="signup-password-help-5" class="form-text">
At least 8 characters with one number and one symbol.
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary w-100">Create account</button>
</div>
</form>3Sizing
Large, default and small inputs for hero forms, regular forms and dense toolbars.
<div class="vstack gap-2">
<label class="visually-hidden" for="size-lg-6">Large input</label>
<input class="form-control form-control-lg" type="text" id="size-lg-6" placeholder="Large - search dermatology">
<label class="visually-hidden" for="size-md-7">Default input</label>
<input class="form-control" type="text" id="size-md-7" placeholder="Default - project name">
<label class="visually-hidden" for="size-sm-8">Small input</label>
<input class="form-control form-control-sm" type="text" id="size-sm-8" placeholder="Small - table filter">
</div>4Disabled and read-only
Read-only fields can still be focused and copied; disabled fields are skipped entirely.
<div class="row g-3">
<div class="col-sm-6">
<label for="account-id-9" class="form-label">Account ID</label>
<input class="form-control" type="text" id="account-id-9" value="ACC-10907" readonly>
</div>
<div class="col-sm-6">
<label for="account-plan-10" class="form-label">Current plan</label>
<input class="form-control" type="text" id="account-plan-10" value="Vaccination" disabled>
</div>
</div>5Plain text values
Use form-control-plaintext to show saved values inline with regular form labels.
<div class="mb-2 row">
<label for="plain-email-11" class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="text" readonly class="form-control-plaintext" id="plain-email-11" value="nora.brennan@example.com">
</div>
</div>
<div class="mb-2 row">
<label for="plain-phone-12" class="col-sm-3 col-form-label">Phone</label>
<div class="col-sm-9">
<input type="text" readonly class="form-control-plaintext" id="plain-phone-12" value="+1 (555) 674-7435">
</div>
</div>6Textarea with counter
A limited textarea; the counter behaviour writes the used characters next to the label.
0 / 160
<div class="mb-3">
<div class="d-flex justify-content-between">
<label for="bio-13" class="form-label">Short bio</label>
<small id="bio-count-14" class="text-body-secondary">0 / 160</small>
</div>
<textarea class="form-control" id="bio-13" rows="3" maxlength="160" data-demo-counter="#bio-count-14" placeholder="Sales Executive based in Kyoto."></textarea>
</div>7Password with show / hide
A toggle button reveals the typed password so people can check it before submitting.
<label for="login-password-15" class="form-label">Password</label>
<div class="input-group">
<input type="password" class="form-control" id="login-password-15" value="sunset-758" autocomplete="current-password">
<button class="btn btn-outline-secondary" type="button" data-demo-password-toggle="#login-password-15" aria-label="Show or hide password"><i class="bi bi-eye" aria-hidden="true"></i></button>
</div>8Colour input
A native colour picker styled to match the other controls - handy in theme settings.
Used for buttons and links in your workspace.
<div class="d-flex align-items-center gap-3">
<input type="color" class="form-control form-control-color" id="brand-colour-16" value="#a5c615" title="Choose an accent colour">
<div>
<label for="brand-colour-16" class="form-label mb-0 fw-semibold">Accent colour</label>
<div class="form-text mt-0">
Used for buttons and links in your workspace.
</div>
</div>
</div>9Datalist suggestions
A text input that suggests values while typing but still accepts anything.
<label for="city-17" class="form-label">Nearest city</label>
<input class="form-control" list="city-options-18" id="city-17" placeholder="Type to search...">
<datalist id="city-options-18">
<option value="Valencia"></option>
<option value="Melbourne"></option>
<option value="Kyoto"></option>
<option value="Porto"></option>
<option value="Edinburgh"></option>
<option value="Barcelona"></option>
</datalist>10Number inputs
Numeric fields with min, max and step limits so the browser offers sensible values.
<div class="row g-3">
<div class="col-sm-4">
<label for="guests-19" class="form-label">Guests</label>
<input type="number" class="form-control" id="guests-19" min="1" max="12" value="3">
</div>
<div class="col-sm-4">
<label for="nights-20" class="form-label">Nights</label>
<input type="number" class="form-control" id="nights-20" min="1" max="30" value="9">
</div>
<div class="col-sm-4">
<label for="budget-21" class="form-label">Budget (USD)</label>
<input type="number" class="form-control" id="budget-21" min="0" step="50" value="950">
</div>
</div>11Search field with icon
An icon sits inside the field; extra left padding keeps the text clear of it.
<div class="tl-search position-relative">
<span class="tl-search-icon text-body-secondary"><i class="bi bi-search" aria-hidden="true"></i></span>
<label for="site-search-22" class="visually-hidden">Search</label>
<input type="search" class="form-control" id="site-search-22" placeholder="Search teams, people or files">
</div>12Specialised input types
Telephone, URL and date types open the right keyboard on phones and validate the format.
<div class="row g-3">
<div class="col-md-4">
<label for="phone-23" class="form-label">Mobile phone</label>
<input type="tel" class="form-control" id="phone-23" placeholder="+1 (555) 216-2851" autocomplete="tel">
</div>
<div class="col-md-4">
<label for="website-24" class="form-label">Website</label>
<input type="url" class="form-control" id="website-24" placeholder="yourname.com">
</div>
<div class="col-md-4">
<label for="birthday-25" class="form-label">Birthday</label>
<input type="date" class="form-control" id="birthday-25">
</div>
</div>13Pill-shaped newsletter field
Rounded inputs and buttons give marketing sections a softer look.
Join 61.1k patients - one email a month.
<form class="d-flex flex-column flex-sm-row gap-2">
<label for="newsletter-email-26" class="visually-hidden">Email address</label>
<input type="email" class="form-control rounded-pill px-4" id="newsletter-email-26" placeholder="you@example.com">
<button type="submit" class="btn btn-primary rounded-pill px-4 text-nowrap">Get updates</button>
</form>
<p class="form-text mt-2">Join 61.1k patients - one email a month.</p>14Underline style
A minimal look with only a bottom border, useful on landing pages and contact sections.
<div class="row g-4">
<div class="col-sm-6">
<label for="u-name-27" class="form-label small text-uppercase text-body-secondary">Your name</label>
<input type="text" class="form-control tl-underline" id="u-name-27" placeholder="Nora">
</div>
<div class="col-sm-6">
<label for="u-company-28" class="form-label small text-uppercase text-body-secondary">Company</label>
<input type="text" class="form-control tl-underline" id="u-company-28" placeholder="Lyraera">
</div>
</div>15Inline invite row
A grid row that keeps an email field and its action on one line from small screens up.
<form class="row g-2 align-items-end">
<div class="col-sm">
<label for="invite-email-29" class="form-label">Invite a teammate</label>
<input type="email" class="form-control" id="invite-email-29" placeholder="leo.quinn@example.com">
</div>
<div class="col-sm-auto">
<label for="invite-role-30" class="form-label">Role</label>
<input type="text" class="form-control" id="invite-role-30" value="HR Partner">
</div>
<div class="col-sm-auto">
<button type="submit" class="btn btn-primary w-100"><i class="bi bi-send-fill" aria-hidden="true"></i> Send invite</button>
</div>
</form>16Shipping address
Address fields with matching autocomplete tokens so browsers can fill them in one go.
<div class="row g-3">
<div class="col-md-8">
<label for="street-31" class="form-label">Street address</label>
<input type="text" class="form-control" id="street-31" placeholder="195 Lakeview Terrace" autocomplete="address-line1">
</div>
<div class="col-md-4">
<label for="apt-32" class="form-label">Apartment <span class="text-body-secondary">(optional)</span></label>
<input type="text" class="form-control" id="apt-32" placeholder="Suite 18" autocomplete="address-line2">
</div>
<div class="col-md-8">
<label for="town-33" class="form-label">City</label>
<input type="text" class="form-control" id="town-33" placeholder="Vancouver" autocomplete="address-level2">
</div>
<div class="col-md-4">
<label for="postcode-34" class="form-label">Postal code</label>
<input type="text" class="form-control" id="postcode-34" placeholder="97701" autocomplete="postal-code">
</div>
</div>17Comment box
A textarea inside a card with avatar and actions, ready for discussions and reviews.
<div class="card">
<div class="card-body d-flex gap-3">
<img src="../assets/img/avatar-12.svg" alt="Nora Brennan" width="40" height="40" class="rounded-circle flex-shrink-0">
<div class="flex-grow-1">
<label for="comment-35" class="visually-hidden">Write a comment</label>
<textarea class="form-control border-0 bg-body-tertiary" id="comment-35" rows="3" style="resize: none;" placeholder="Share your thoughts on Sleep tips our doctors actually use..."></textarea>
</div>
</div>
<div class="card-footer d-flex justify-content-between align-items-center">
<div class="d-flex gap-1">
<button type="button" class="btn btn-sm btn-light" aria-label="Attach file"><i class="bi bi-paperclip" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-light" aria-label="Mention someone"><i class="bi bi-at" aria-hidden="true"></i></button>
</div>
<button type="button" class="btn btn-sm btn-primary">Post comment</button>
</div>
</div>18Verification code
Six single-digit inputs for a one-time code sent by email or SMS.
Enter the code we sent to nora.brennan@example.com
Didn't get it? Send a new code
<p class="mb-2 fw-semibold">Enter the code we sent to nora.brennan@example.com</p>
<div class="d-flex gap-2">
<label for="code-digit-36" class="visually-hidden">Digit 1</label>
<input type="text" class="form-control text-center tl-otp" id="code-digit-36" inputmode="numeric" maxlength="1" autocomplete="one-time-code">
<label for="code-digit-37" class="visually-hidden">Digit 2</label>
<input type="text" class="form-control text-center tl-otp" id="code-digit-37" inputmode="numeric" maxlength="1" autocomplete="one-time-code">
<label for="code-digit-38" class="visually-hidden">Digit 3</label>
<input type="text" class="form-control text-center tl-otp" id="code-digit-38" inputmode="numeric" maxlength="1" autocomplete="one-time-code">
<label for="code-digit-39" class="visually-hidden">Digit 4</label>
<input type="text" class="form-control text-center tl-otp" id="code-digit-39" inputmode="numeric" maxlength="1" autocomplete="one-time-code">
<label for="code-digit-40" class="visually-hidden">Digit 5</label>
<input type="text" class="form-control text-center tl-otp" id="code-digit-40" inputmode="numeric" maxlength="1" autocomplete="one-time-code">
<label for="code-digit-41" class="visually-hidden">Digit 6</label>
<input type="text" class="form-control text-center tl-otp" id="code-digit-41" inputmode="numeric" maxlength="1" autocomplete="one-time-code">
</div>
<p class="form-text">Didn't get it? <a href="#">Send a new code</a></p>19On a dark surface
data-bs-theme="dark" switches the controls inside a section to their dark style.
Talk to our team
<div class="p-4 rounded-3 bg-dark" data-bs-theme="dark">
<h3 class="h6 text-white mb-3">Talk to our team</h3>
<div class="mb-3">
<label for="dark-name-42" class="form-label">Name</label>
<input type="text" class="form-control" id="dark-name-42" placeholder="Nora Brennan">
</div>
<div class="mb-3">
<label for="dark-msg-43" class="form-label">How can we help?</label>
<textarea class="form-control" id="dark-msg-43" rows="2"></textarea>
</div>
<button type="button" class="btn btn-light">Send message</button>
</div>20Inline help text
Help text placed beside the field on wider screens, below it on phones.
4-20 letters, numbers or dashes.
<div class="row g-2 align-items-center">
<div class="col-auto">
<label for="handle-44" class="col-form-label">Username</label>
</div>
<div class="col-auto">
<input type="text" id="handle-44" class="form-control" value="nora-brennan" aria-describedby="handle-help-45">
</div>
<div class="col-auto">
<span id="handle-help-45" class="form-text">4-20 letters, numbers or dashes.</span>
</div>
</div>