Form-elements
Input Types
Type Checkbox
Type Radio
Input shapes
Input border Styles
Input Sizing
Overview
Disabled forms
Form text
Your password must be 8-20 characters long, contain letters and
numbers,
and
must not contain spaces, special characters, or emoji.
Default Select
Customize the native <select>s with custom CSS that changes the element’s initial appearance.
Checks & Radios
Checks
Disabled
Radios
Disabled
Default (stacked)
Switches
Checkbox Sizes
Radio Sizes
Switch Sizes
Inline
Without labels
Reverse
Outlined styles
Radio toggle buttons
Checkbox toggle buttons
Colored Checkboxes
Outline Checkboxes
Colored Radios
Outline Radios
Switches Colors
Toggle Switches Style-1
Toggle Switches Style-2
Primary
Secondary
Warning
Info
Success
Danger
Light
Dark
Toggle Switch-1 Sizes
Small size toggle switch toggle-sm
Default toggle switch toggle-md
Large size toggle switch toggle-lg
Toggle Switch-2 Sizes
Small size toggle switch toggle-sm
Default toggle switch toggle-md
Large size toggle switch toggle-lg
Input Groups
Input Groups
@
@example.com
https://example.com/users/
$
.00
@
With textarea
Wrapping
@
Sizing
Small
Default
Large
Buttons addons
Buttons with dropdowns
Custom file input
Multiple inputs
First and last name
Checkboxes and radios
Multiple addons
$
0.00
$
0.00
Segmented buttons
Custom select
Range Sliders
Default Range
Disabled Range
Range With Min and Max Values
Range With Steps
noUiSlider:
Default-Styling
Fit Handles
Rounded Styling
Square Styling
Color Picker Slider
Locking Sliders
Merging tooltips slider
Non Linear Slider
Sliding Handles Tooltips
Colored Connect Elements
Slider Toggle
Toggle Movement By Clicking Pips
Soft Limits
noUiSlider Colors:
Primary
Secondary
Warning
Info
Success
Danger
Input Sizes
Set heights using classes like .form-control-lg and .form-control-sm.
Readonly plain text
If you want to have <input readonly> elements in your form styled as plain text, use the <.form-control-plaintext> class to remove
the default form field styling and preserve the correct margin and padding .
General Elements
Checkbox & Radio Buttons
Radios
Medium Radios
Large Radios
Checkboxes
Medium Checkboxes
Large Checkboxes
Switches
-
Bootstrap Switch Default
-
Bootstrap Switch Primary
-
Bootstrap Switch Success
-
Bootstrap Switch Info
-
Bootstrap Switch Warning
-
Bootstrap Switch Danger
Default Input Groups
@
@example.com
https://example.com/users/
$
.00
@
Input Groups Sizes
Small
Default
Large
Bootstrap Fileuploads
Form Elements With Sizes
Form-control small sizes
Form-control Medium sizes
Form-control Large sizes
