Components menu
Text input
A form field that allows users to enter a single line of text.
<div class="mb-3">
<label for="FormControlInput-Email" class="form-label">Email address</label>
<input type="email" class="form-control" id="FormControlInput-Email" placeholder="name@example.com">
</div>
Size options
Fixed-width inputs
<div class="mb-3">
<label for="FormControlInput-FixedWidth100" class="form-label">100 characters</label>
<input type="text" class="form-control form-control--fixed-three-quarters" id="FormControlInput-FixedWidth100" placeholder="Maximum 100 characters" maxlength="100">
</div>
<div class="mb-3">
<label for="FormControlInput-FixedWidth50" class="form-label">50 characters</label>
<input type="text" class="form-control form-control--fixed-50" id="FormControlInput-FixedWidth50" placeholder="Maximum 50 characters" maxlength="50">
</div>
<div class="mb-3">
<label for="FormControlInput-FixedWidth20" class="form-label">20 characters</label>
<input type="text" class="form-control form-control--fixed-20" id="FormControlInput-FixedWidth20" placeholder="Maximum 20 characters" maxlength="20">
</div>
Fluid-width inputs
<div class="mb-3">
<label for="FormControlInput-Fluid100" class="form-label">Full</label>
<input type="text" class="form-control form-control--fluid-full" id="FormControlInput-Fluid100">
</div>
<div class="mb-3">
<label for="FormControlInput-Fluid75" class="form-label">Three quarters</label>
<input type="text" class="form-control form-control--fluid-three-quarters" id="FormControlInput-Fluid75">
</div>
<div class="mb-3">
<label for="FormControlInput-Fluid67" class="form-label">Two thirds</label>
<input type="text" class="form-control form-control--fluid-two-thirds" id="FormControlInput-Fluid67">
</div>
<div class="mb-3">
<label for="FormControlInput-Fluid50" class="form-label">Half</label>
<input type="text" class="form-control form-control--fluid-half" id="FormControlInput-Fluid50">
</div>
Text input with an associated button
Sometimes buttons are directly related to an input field, such as in a site search or date picker.
<div class="input-group mb-3">
<input type="text" name="search" class="form-control" placeholder="Search our site" aria-label="search" aria-describedby="button-search">
<button class="btn btn-outline-secondary" type="button" id="button-search">
<span class="visually-hidden visually-hidden-focusable"> Search <span>
<i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
</button>
</div>
/* Text input
------------------------------------ */
.form-control--fixed-100 {
max-width: calc(16px + 100em);
}
.form-control--fixed-50 {
max-width: calc(16px + 50em);
}
.form-control--fixed-20 {
max-width: calc(16px + 20em);
}
.form-control--fluid-full{
max-width: 100%;
}
.form-control--fluid-three-quarters {
max-width: 75%;
}
.form-control--fluid-two-thirds {
max-width: 67.666667%;
}
.form-control--fluid-half {
max-width: 50%;
}