Form Elements
Basic Input
Included .form-control to <input>, <select>s and <textarea>for general appearance, focus state, sizing, and more.
We'll never share your email with anyone else.
email@example.com
Input Group
@
@example.com
$
.00
@
@
@
Checkbox & Radio
Checkbox
Radio
Color Options
Switch
Switch
Color Options
Selectize
Selectize is the hybrid of a textbox and <select> box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on.
Single Item Select
Tagging
Option Groups
Date Time Picker
Default Datepicker
Use data-plugin="timepicker" create a basic timepicker.
Date Range
Using the input-daterange construct with multiple child inputs will instantiate one picker per input and link them together to allow selecting ranges.
to
Inline Date Picker
Instantiating the datepicker on a simple div will give an embedded picker that is always visible
| « | April 2025 | » | ||||
|---|---|---|---|---|---|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
| 30 | 31 | 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 1 | 2 | 3 |
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
Summernote
Standard Editor
Some Text Here
Custom Toolbar
Some Text Here
Air-Mode
This is Air Mode editing area.
Lorem ipsum dolor sit amet, consectetur adipisicing elitconsectetur adipisicing elit.
- - list text here
- - list text here
-
- list text here
- list text here
- list text here
- - list text here
Click to edit
Click to edit text