Form controls

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

Example

hint

Sizing

Set heights using classes like .form-{control|select}-lg and .form-{control|select}-sm.

Floating labels

Create beautifully simple form labels that float over your input fields.

Checks and radios

Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.

Checkboxes
Radios
Switches
Use checked attribute to input for checked mode, same as disabled for disabled mode. and use .form-switch to .form-check to enable switch mode.
Note: you must add type="checkbox" on input when you want to enable switch mode.

Sizing

Set heights using classes like .form-check-xl, .form-check-lg and .form-check-sm.

Checkboxes
Radios
Switches