Form elements

Examples for form control styles, layout options, and custom components for creating a wide variety of forms elements.
we have included dropzone for file uploads, datepicker and select2 for custom controls.

Forms

Standard form controls

Floating Labels

atmos comes with floating label inputs

Forms Dark

Form control in dark backgrounds. use form-dark in parent container to make inputs of the given container transparent

Input Groups

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

@
@example.com
https://example.com/users/
$
.00
With textarea
Forms Sizes

Form Control Sizes

Validation Server Side

You can add server side validation using you can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.
Flushed Forms

default form-controls with transparent borders for input group.