Input with an Icon

Input support an icon on either left or right position.

Select Menu

Custom select menus need only a custom class, .custom-select to trigger the custom styles.

File Browser

For even more customization and cross browser consistency, use our completely custom file browser element to replace the browser defaults.

Floating Labels

Build form controls with floating labels via the :placeholder-shown pseudo-element.

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.
For custom select, set heights using classes like .custom-select-lg and .custom-select-sm.

Input clearable

Show a cross icon that can be clicked on to remove the input value instantly if desired.

Autocomplete

Simple autocomplete

Autowidth Text Input

Automatically adjust input text width to fit content.

Autosize Textarea

Autosize is a small, stand-alone script to automatically adjust textarea height to fit text.

Checkboxes

For even more customization and cross browser consistency, use our completely custom checkbox element to replace the browser defaults.

Without label

Radios

For even more customization and cross browser consistency, use our completely custom radio element to replace the browser defaults.

Without label

Switches

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.

Without label

Range

Create custom range controls with .custom-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers.

Star Rating Input

Transform a standard input field into a simple star rating system

Toggle Password Visibility

Toggle between password visibility.

Dual List Box

Simple dual list box for multiple select options

Slugify

Slugifies a String.