Forms
Examples and usage guidelines for form controls, layout options, and custom components used for data collection.
Overview
A comprehensive example combining various form controls.
We'll never share your email with anyone else.
Show Code
<div class="mb-3">
<label class="form-label">Email Address</label>
<input type="email" class="form-control" placeholder="[email protected]">
<div class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="checkId">
<label class="form-check-label" for="checkId">Remember me</label>
</div>Form control
Standard textual form controls like inputs and textareas.
Show Code
<div class="mb-3">
<label for="exampleInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInput1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleTextarea1" rows="3"></textarea>
</div>Select
Custom <select> menus.
Show Code
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>Checks & radios
Checkboxes and radios for selecting choices.
Checkboxes
Radios
Switches
Show Code
<!-- Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">Default checkbox</label>
</div>
<!-- Radio -->
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">Default radio</label>
</div>
<!-- Switch -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch</label>
</div>Range
Custom range controls with consistent styling.
Show Code
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">Input group
Extend form controls with prepended or appended text, buttons, and more.
@
@itats.ac.id
Rp.
.00
Show Code
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search..." aria-label="Search">
<button class="btn btn-outline-primary" type="button" id="button-addon2">Search</button>
</div>Floating labels
Animated floating labels for inputs and textareas.
Show Code
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Email address</label>
</div>Layout
Using grid classes or flexbox for form layouts.
Show Code
<form class="row g-3">
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="col-md-6">
<label for="inputPassword4" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
...
</form>Validation
Provide valuable, actionable feedback to your users with HTML5 form validation.
Show Code
<!-- Valid Input -->
<input type="text" class="form-control is-valid" value="Mark" required>
<div class="valid-feedback">Looks good!</div>
<!-- Invalid Input -->
<input type="text" class="form-control is-invalid" required>
<div class="invalid-feedback">Please choose a username.</div>