Form Elements
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. Here’s a quick example to demonstrate form styles, so use these classes to opt into their customized displays.
Form controls
Textual form controls—like
<input>s,
<select>s, and
<textarea>s—are styled with the
.form-control class. Included are
styles for general appearance, focus state,
sizing, and more. Additional classes can be used
to vary this layout on a per-form basis.
State Preview
Size Preview
Use .form-control-lg or
.form-control-sm with
.form-control for large or small
input box.
Code Example
<div class="form-group">
<label class="form-label" for="default-01">Input text label</label>
<div class="form-control-wrap">
<input type="text" class="form-control" id="default-01" placeholder="Input placeholder">
</div>
</div>
<div class="form-group">
<label class="form-label" for="default-02">Textarea label</label>
<div class="form-control-wrap">
<textarea class="form-control" id="default-textarea">Large text area content</textarea>
</div>
</div>
Form Outlined
Textual form controls—like
<input>s,
<select>s, and
<textarea>s—are styled with the
.form-control class. Included are
styles for general appearance, focus state,
sizing, and more. Additional classes can be used
to vary this layout on a per-form basis.
Outlined Sizes
Use .form-control-outlined with
.form-control for outlined form
element and replace
.form-label with
.form-label-outlined, also place
label after input/select element.
Code Example
<div class="form-group">
<div class="form-control-wrap">
<input type="text" class="form-control form-control-outlined" id="outlined" placeholder="Input placeholder">
<label class="form-label-outlined" for="outlined">Input text label</label>
</div>
</div>
Select with Select2
As .form-select class use for default
<select>,
using .js-select2 class in
<select>
element to replace browser default style with
Select2, as its give you a customizable select box with
support for searching, tagging, and many other
highly used options. For the documentation for
Select2, that can be found
here.
For large or small size of Select2, use
lg, sm in
data-ui="" attribute of
<select>
element. And you can use on in
data-search="" attribute to display
search option in select2.
Code Example
<div class="form-group">
<label class="form-label">Select2 Default</label>
<div class="form-control-wrap">
<select class="form-select">
...
</select>
</div>
</div>
