SUIT CSS components-form-field
A CSS component for rendering form fields. Ensures inputs, labels and help text behave consistently across browsers.
Read more about SUIT CSS.
Installation
Example
Available classes
Component structure
FormField
- Containing element. Apply state classes to thisFormField-input
- Consistent rendering of various form inputsFormField-select
- Used for select elements only (instead ofFormField-input
)FormField-label
- Label text for the inputFormField-text
- Used to display help text or validation messagesFormField-check
- Wraps aroundinput
andlabel
when using either radio or checkbox inputsFormField-checkInput
- Theinput
class when insideFormField-check
FormField-checkLabel
- Thelabel
when insideFormField-check
States
is-error
- Applies the error colours to each elementis-warning
- Applies the warning colours to each elementis-success
- Applies the success colours to each element
Usage
Basic
This works with other inputs such as textarea
, range
and file
.
Surname Some optional text to the user about the input field
Select elements
Select elements require their own class name to ensure consistent rendering in Blink/Webkit.
Select Some option Another option
label
container
Using a Surname Some text to the user about the input field
Checkbox or radio input types
Checkbox and radio inputs require an additional container and different class names.
This controls positioning and allows the FormField-text
to be rendered beneath:
Apples Oranges Some text about the choices above
Validation states
A state class of is-error
, is-success
or is-warning
can be applied to the
root element:
Surname There was a problem!
Controlling layout
FormField
leaves the layout concerns to another component or utility, for
example suitcss-components-grid.
Vertical spacing
Can be handled by a component that controls the <form/>
itself:
// ... // ...
Grid
and utils-size
Horizontal positioning with The following achieves an inline form effect
Username That username is already taken!
Configurable variables
FormField-label
--FormField-label-color
--FormField-label-marginBottom
FormField-input
--FormField-input-borderColor
--FormField-input-borderRadius
--FormField-input-borderWidth
--FormField-input-color
--FormField-input-fontFamily
--FormField-input-fontSize
--FormField-input-padding
FormField-text
--FormField-text-fontSize
--FormField-text-marginTop
FormField-select
--FormField-select-height
FormField-check
--FormField-check-gutter
- Space between checkbox/radio and the label
Validation states
--FormField-input-onDisabled-backgroundColor
--FormField-onError-color
--FormField-onWarning-color
--FormField-onSuccess-color
Testing
Install Node (comes with npm).
npm install
To generate a build:
npm run build
To lint code with postcss-bem-linter and stylelint
npm run lint
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 7.1+
- Internet Explorer 10+
- Android 5+ (Chrome 55, Firefox 51)
- iOS 7+ (Safari)
- Windows phone 8.1+