Forms
- Basic form
- Block form
- Input groups
- File inputs
- Input states
- Checkbox
- Radio
- Switch
- Progress
- Errors & warning
- Form results
Basic form
Hubble's forms and form elements come pre-styled out of the box.
Inputs are wrapped in a .form-field to maintain consistency and spacing and some other styling.
By default, form elements will be displayed as inline elements, however you can make them span full width by adding the .row class.
Block form
For block level inputs, add the .row class to the .form-field wrapper element.
The example below illustrates a basic example of a form with block level input elements.
Input groups
Group inputs with a label or a button (or both) adding the .field-group class to the .form-field wrapper.
File inputs
File type inputs for upload use a tiny bit of JavaScript and CSS using
a combination of input and button styling. It requires a fair bit of markup to display properly.
Input states
Input states are styled with the psuedo classes :focus, :disabled, you may also use these as
classnames .focus, .disabled
Checkbox
Custom styled checkboxes can be used by simply wrapping the label and input in .checkbox classed element.
Checkboxes can be further contextualized using the .checkbox-default, .checkbox-primary, .checkbox-info, .checkbox-success, .checkbox-warning, .checkbox-danger
classes.
Radio
Custom styled radios can be used by simply wrapping the label and input in .radio classed element.
Radios can be further contextualized using the .radio-default, .radio-primary, .radio-info, .radio-success, .radio-warning, .radio-danger
classes.
Switch
Switches are a custom styled checkbox element.
Switches can be further contextualized using the .switch-default, .switch-primary, .switch-info, .switch-success, .switch-warning, .switch-danger
classes.
Progress
Custom styled progress bars can be used in upload forms or Ajax tasks. Progress bars can be further contextualized using
the .progress-default, .progress-primary, .progress-info, .progress-success, .progress-warning, .progress-danger, .progress-gradient
classes.
Validation
Input errors and warning help text can be helpful when running form validations.
They're hidden by default and will display when the the wrapping .form-field has a class of
.danger or .warning
Form results
Form results can be displayed as a message by simply adding a contextual class to the <form> element.
This is super handy as you can have all your messages setup in the form result, and simply add the contextual class depending on the
form validation.
The contextual classes are .info, .success, .warning, .danger.