Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Elements on Bootstrap
<input type="text" id="simpleinput" class="form-control">
<div>
<label for="labelInputt1" class="form-label">Email address</label>
<input type="email" class="form-control" id="labelInputt1"
placeholder="name@example.com">
</div>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInput" placeholder="name">
<label for="floatingInput">Name</label>
</div>
<div class="app-search">
<input type="search" class="form-control" placeholder="Search for something...">
<i data-lucide="search" class="app-search-icon text-muted"></i>
</div>
<input type="text" id="validInput" class="form-control is-valid">
<input type="text" id="inValidationInput" class="form-control is-valid">
<input type="text" id="example-rounded" class="form-control
rounded-pill" placeholder="placeholder">
<input type="text" id="example-placeholder" class="form-control"
placeholder="placeholder">
<textarea class="form-control" id="example-textarea" rows="5"></textarea>
<input type="text" id="example-readonly" class="form-control"
readonly value="Readonly value">
<input type="text" class="form-control" id="example-disable"
disabled value="Disabled value">
<input type="text" readonly class="form-control-plaintext" id="example-static"
value="email@example.com">
<input type="text" id="example-helping" class="form-control" placeholder="Helping text">
<small class="form-text text-muted">...</small>
<select class="form-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="app-search">
<select class="form-select form-control" id="discount">
<option selected>Choose Discount</option>
<option value="No Discount">No Discount</option>
<option value="Flat Discount">Flat Discount</option>
<option value="Percentage Discount">Percentage Discount</option>
</select>
<i data-lucide="percent" class="app-search-icon text-muted"></i>
</div>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="input-group">
<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="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</div>
@
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-label="Username">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>
<div class="input-group">
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<div class="input-group">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
</div>
<div class="input-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username">
<button class="btn btn-dark" type="button">Button</button>
</div>
<input class="form-control" type="file" id="inputGroupFile04">
<input class="form-control" type="file" id="formFileMultiple01"
multiple>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputEmail" placeholder="name@example.com">
<label for="floatingInputEmail">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea" style="height: 100px"></textarea>
<label for="floatingTextarea">Comments</label>
</div>
<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label 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>
<label for="floatingSelect">Works with selects</label>
</div>
<input type="text" class="form-control form-control-sm" placeholder=".input-sm">
<input type="text" class="form-control" placeholder="Normal">
<input type="text" class="form-control form-control-lg" placeholder=".input-lg">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder=".col-sm-4">
</div>
<select class="form-select form-select-lg">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-sm">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="form-check mb-2">
<input type="checkbox" class="form-check-input" id="checkDefault">
<label class="form-check-label" for="checkDefault">Default Checkbox</label>
</div>
<div class="form-check mb-2">
<input type="checkbox" class="form-check-input form-check-input-light" id="checkLight">
<label class="form-check-label" for="checkLight">Light Checkbox</label>
</div>
<div class="mb-2">
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="checkInline1" checked>
<label class="form-check-label" for="checkInline1">Inline 1</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="checkInline2">
<label class="form-check-label" for="checkInline2">Inline 2</label>
</div>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" value="" id="checkIndeterminate">
<label class="form-check-label" for="checkIndeterminate">
Disabled indeterminate checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkCheckedDisabled" checked disabled>
<label class="form-check-label" for="checkCheckedDisabled">
Disabled checked checkbox
</label>
</div>
<div class="form-check fs-lg mb-2">
<input type="checkbox" class="form-check-input mt-1" id="checkSize1" checked>
<label class="form-check-label fs-base" for="checkSize1">Default Checkbox</label>
</div>
<div class="form-check form-check-secondary fs-xxl mb-2">
<input type="checkbox" class="form-check-input mt-1" id="checkSize2" checked>
<label class="form-check-label fs-base" for="checkSize2">Default Checkbox</label>
</div>
<div class="form-check mb-2">
<input type="radio" class="form-check-input" name="gridRadio" id="radio1" checked>
<label class="form-check-label" for="radio1">Option 1</label>
</div>
<div class="form-check mb-2">
<input type="radio" class="form-check-input" name="gridRadio" id="radio2">
<label class="form-check-label" for="radio2">Option 2</label>
</div>
<div class="mb-2">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked>
<label class="form-check-label" for="inlineRadio1">Inline 1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">Inline 2</label>
</div>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="disabledRadioOptions" id="inlineRadio3" value="option3" checked disabled>
<label class="form-check-label" for="inlineRadio3">Disabled Checked Radio</label>
</div>
<div class="mb-2">
<div class="form-check fs-lg form-check-inline">
<input class="form-check-input" type="radio" name="paymentMethod" id="radioCash" value="cash" checked>
<label class="form-check-label fs-base" for="radioCash">Cash</label>
</div>
<div class="form-check fs-lg form-check-inline">
<input class="form-check-input" type="radio" name="paymentMethod" id="radioCard" value="card">
<label class="form-check-label fs-base" for="radioCard">Card</label>
</div>
</div>
<div class="mb-2">
<div class="form-check fs-xxl form-check-inline">
<input class="form-check-input" type="radio" name="deliveryOption" id="radioPickup" value="pickup" checked>
<label class="form-check-label fs-base" for="radioPickup">Pickup</label>
</div>
<div class="form-check fs-xxl form-check-inline">
<input class="form-check-input" type="radio" name="deliveryOption" id="radioHome" value="home">
<label class="form-check-label fs-base" for="radioHome">Home Delivery</label>
</div>
</div>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="switch1" checked>
<label class="form-check-label" for="switch1">Enabled Switch</label>
</div>
<div class="form-check form-switch form-check-secondary fs-xxl mb-2">
<input type="checkbox" class="form-check-input mt-1" id="checkboxSize20" checked>
<label class="form-check-label fs-base" for="checkboxSize20">I'm 20px Switch</label>
</div>
<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" id="reverseCheck1">
<label class="form-check-label" for="reverseCheck1">Reverse checkbox</label>
</div>
<div class="form-check form-check-success">
<input type="checkbox" class="form-check-input" id="checkSuccess" checked>
<label class="form-check-label" for="checkSuccess">Success</label>
</div>
<div class="form-check form-check-success">
<input type="radio" class="form-check-input" name="radioColor" id="radioSuccess" checked>
<label class="form-check-label" for="radioSuccess">Success</label>
</div>
<div class="form-check form-check-info form-switch mb-2">
<input type="checkbox" class="form-check-input" id="switchInfo" checked>
<label class="form-check-label" for="switchInfo">Info</label>
</div>
<div>
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Single Toggle</label>
</div>
<div class="btn-group" role="group" aria-label="Checkbox toggle group">
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">One</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Two</label>
<input type="checkbox" class="btn-check" id="btncheck4" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck4">Three</label>
</div>
<div class="btn-group" role="group" aria-label="Radio toggle group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-secondary" for="btnradio1">Left</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-secondary" for="btnradio2">Middle</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-secondary" for="btnradio3">Right</label>
</div>