Scroll to content

Forms

Text input

.form-control .form-label · the field is pill shaped, the filled state draws the ui/focus border

Default

.form-label.required :disabled · required adds the marker, disabled greys the field out

With button

.form-group .form-group-btn · the button is pulled into the field

Large

.form-control-lg .bg-subtle · the larger field on a subtle background

With button

.form-group .form-control-lg


Select

.form-select · the arrow is a data URI with the primary colour baked in


Textarea

textarea.form-control


Checkboxes

.form-check .form-check-input .form-check-label · radius/sm on the box

Radios

.form-check .form-check-input .form-check-label · the same markup with type radio


File input

input.form-control ::file-selector-button