Form
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Do you know the latest update of 2022? Our roadmap is alive for future updates.
Notifications
4 New
Debi Cakar commented on Ecosystem and conservation
1m ago
Edward Adams invite you to Prototyping
9h ago
Richard Charles mentioned you in UX Basics Field
13h agoYou swapped exactly 0.230000 ETH for 28,031.99
17h ago
Basic
Basic usage example.
<form>
<div class="mb-24">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-24">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-24 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Disabled forms
Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.
<form>
<div class="mb-24">
<label for="disabledTextInput" class="form-label">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" disabled>
</div>
<div class="mb-24">
<label for="disabledSelect" class="form-label">Disabled select menu</label>
<select id="disabledSelect" class="form-select" disabled>
<option>Disabled select</option>
</select>
</div>
<div class="mb-24">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
</div>
<button type="submit" class="btn btn-primary" disabled>Submit</button>
</form>