SUIT CSS components-form
Component CSS for forms. Provides general styling to build hightly composable and consistent forms.
Read more about SUIT CSS.
Installation
Features
- Full-width forms
- Inter-fields vertical spacing
- Fields adapt to the dimensions of an ancestral context
- Simple Custom Select
- Basic validation states
Available classes
Form
core componentForm--spaced
adds spacing between form fieldsForm-field
a form field containerForm-field--checkbox
checkbox input modifierForm-field--radio
radio input modifierForm-label
form label textForm-input
the actual form inputForm-message
an (optional) form message
Use
A form can have any number of fields. Each form field must contain a single form input, label and optionally a message.
Field Hello there
Special form fields
Basic styles for more complex form fields are included in this component.
Buttons
Buttons are not styled. You are free to style buttons as you please or use an existing component like suitcss-button.
SUIT CSS Form however provides two classes:
.Form-button
– Attaches to a nested component.Form-wrapButton
– Wraps a nested component
Both make buttons full-width and consistent with the Form
styles by tweaking padding, borders and border radii only.
Read more about how to style dependencies.
Field <!-- .Form-button attaches to the .Button component --> Submit <!-- .Form-wrapButton wraps the .Button component --> Submit
Tip: Use an utility class e.g. u-inlineBlock
when you don't want full-width buttons.
Checkbox and Radio inputs
Form-field--checkbox
Form-field--radio
Checkbox and radio inputs are Form-field
modifiers.
Use one Form-field
per Form-input
.
Field Field
Custom Select
Modern browsers that support the CSS3 appearance
property
get basic custom select styles without any additional class
needed:
- Padding, border and border radii match other inputs styles.
- Custom arrow.
Horizontal forms
Use a layout component like suitcss-grid.
Vertical spacing between Form-field
Form--spaced
adds uniform vertical space between Form-field
.
Field Field Field
N.B. Checkboxes or radio inputs are grouped and the space between each
is half of the regular Form-field
margin.
Basic Form validation styles
Basic styles for visual validation state classes for the Form-field
:
is-valid
is-invalid
is-warning
Configurable properties
Properties names are self explainatory.
.Form-label
--Form-label-color
--Form-label-font-size
--Form-label-font-weight
.Form-input
--Form-input-border-color
--Form-input-border-radius
--Form-input-color
--Form-input-font-size
--Form-input-padding
checkbox and radio
--Form-checkradio-gutter
vertical space between the form input and the label.
Custom <select> arrow
--Form-select-arrow
url(imageUrl|base64 encoded image)
– must includeurl()
--Form-select-arrow-width
.Form-message
--Form-message-color
--Form-message-font-size
.Form--spaced
--Form--spaced-margin
.Form-field's State
.Form-field.is-valid
--Form-state-valid-border-color
--Form-state-valid-label-color
--Form-state-valid-message-color
.Form-field.is-invalid
--Form-state-invalid-border-color
--Form-state-invalid-label-color
--Form-state-invalid-message-color
.Form-field.is-warning
--Form-state-warning-border-color
--Form-state-warning-label-color
--Form-state-warning-message-color
Testing
Install Node (comes with npm).
npm install
To generate a build:
npm run build
To generate the testing build:
npm run build-test
To watch the files for making changes to test:
npm run watch
Basic visual tests are in test/index.html
.
Browser support
- Google Chrome (latest)
- Opera (latest)
- Firefox (latest)
- Safari 5.1+
- Internet Explorer 8+
- Android 2.2+
- iOS 5.1+
- Windows Phone 8.1