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 aroundinputandlabelwhen using either radio or checkbox inputsFormField-checkInput- Theinputclass when insideFormField-checkFormField-checkLabel- Thelabelwhen 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.
<label class="FormField-label" for="surname">Surnamelabel>
<input class="FormField-input" type="text" id="surname" placeholder="Enter your surname">
<p class="FormField-text">Some optional text to the user about the input fieldp>
div>
Select elements
Select elements require their own class name to ensure consistent rendering in Blink/Webkit.
<label class="FormField-label" for="select">Selectlabel>
<select class="FormField-select">
<option>Some optionoption>
<option>Another optionoption>
select>
div>
Using a label container
<span class="FormField-label">Surnamespan>
<input class="FormField-input" type="text" placeholder="Enter your surname">
<p class="FormField-text">Some text to the user about the input fieldp>
label>
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:
<label class="FormField-check">
<input class="FormField-checkInput" name="shopping" type="radio">
<span class="FormField-checkLabel">Applesspan>
label>
<label class="FormField-check">
<input class="FormField-checkInput" name="shopping" type="radio">
<span class="FormField-checkLabel">Orangesspan>
label>
<span class="FormField-text">Some text about the choices abovespan>
div>
Validation states
A state class of is-error, is-success or is-warning can be applied to the
root element:
<label class="FormField-label">Surnamelabel>
<input class="FormField-input" type="text" placeholder="Enter your surname">
<p class="FormField-text">There was a problem!p>
div>
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 itself:
<div class="UserForm-field">
<div class="FormField">
// ...
div>
div>
<div class="UserForm-field">
<div class="FormField">
// ...
div>
div>
form>
Horizontal positioning with Grid and utils-size
The following achieves an inline form effect
<div class="Grid Grid--alignMiddle">
<div class="Grid-cell u-size2of12">
<label class="FormField-label u-textBold">Usernamelabel>
div>
<div class="Grid-cell u-sizeFill">
<input class="FormField-input" type="text" value="SomeCoolUsername">
<p class="FormField-text">That username is already taken!p>
div>
div>
div>
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+