Form controls

Give textual form controls like inputs and textareas an upgrade with custom styles, sizing, focus states, and more.

Example

hint
Input - Basic
<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>
Input - With hint
<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>
Input - With start icon
<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>
Input - With end icon
<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>
Default Select
<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>
Default file input example
<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>
Multiple Select
<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>
Example textarea
<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.

form control
<div class="form-control-wrap">    <input class="form-control" type="text" placeholder=".form-control" aria-label=".form-control example"></div>
form select
<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.
Readonly
<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>
Recent Notification