Form controls
Give textual form controls like input
s and textarea
s an upgrade with custom styles, sizing, focus states, and more.
Example
hint
<div class="form-group"> <label for="exampleFormControlInputText1" class="form-label">Input text</label> <div class="form-control-wrap"> <input type="text" class="form-control" id="exampleFormControlInputText1" placeholder="Input text placeholder"> </div></div>
<div class="form-group"> <label for="exampleFormControlInputText2" class="form-label">Input text</label> <div class="form-control-wrap"> <div class="form-control-hint"><span>hint</span></div> <input type="text" class="form-control" id="exampleFormControlInputText2" placeholder="Input text placeholder"> </div></div>
<div class="form-group"> <label for="exampleFormControlInputText3" class="form-label">Input with start icon</label> <div class="form-control-wrap"> <div class="form-control-icon start"><em class="icon ni ni-eye"></em></div> <input type="text" class="form-control" id="exampleFormControlInputText3" placeholder="Input text placeholder"> </div></div>
<div class="form-group"> <label for="exampleFormControlInputText4" class="form-label">Input with end icon</label> <div class="form-control-wrap"> <div class="form-control-icon end"><em class="icon ni ni-eye"></em></div> <input type="text" class="form-control" id="exampleFormControlInputText4" placeholder="Input text placeholder"> </div></div>
<div class="form-group"> <label for="exampleFormControlInputText5" class="form-label">Default Select</label> <div class="form-control-wrap"> <select class="form-select" id="exampleFormControlInputText5" 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> </div></div>
<div class="form-group"> <label for="exampleFormControlInputText6" class="form-label">Default file input example</label> <div class="form-control-wrap"> <input class="form-control" type="file" id="exampleFormControlInputText6"> </div></div>
<div class="form-group"> <label for="exampleFormControlInputText7" class="form-label">Multiple Select</label> <div class="form-control-wrap"> <select class="form-select" id="exampleFormControlInputText7" multiple aria-label="multiple 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> </div></div>
<div class="form-group"> <label for="exampleFormControlTextarea8" class="form-label">Example textarea</label> <div class="form-control-wrap"> <textarea placeholder="Textarea Placeholder" class="form-control" id="exampleFormControlTextarea8" rows="3"></textarea> </div></div>
Sizing
Set heights using classes like .form-{control|select}-lg
and .form-{control|select}-sm
.
<div class="form-control-wrap"> <input class="form-control" type="text" placeholder=".form-control" aria-label=".form-control example"></div>
<div class="form-control-wrap"> <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>
Readonly and Disabled
Add the disabled
ro readonly
boolean attribute on an input to give it a grayed out appearance and remove pointer events.
Use the
.form-control-plaintext
class to remove the default form field styling and preserve the correct margin and padding. <div class="form-group"> <label for="exampleFormControlInput9" class="form-label">Readonly</label> <div class="form-control-wrap"> <input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly> </div></div>