Awesome
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
.
<div class="FormField">
<label class="FormField-label" for="surname">Surname</label>
<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 field</p>
</div>
Select elements
Select elements require their own class name to ensure consistent rendering in Blink/Webkit.
<div class="FormField">
<label class="FormField-label" for="select">Select</label>
<select class="FormField-select">
<option>Some option</option>
<option>Another option</option>
</select>
</div>
Using a label
container
<label class="FormField">
<span class="FormField-label">Surname</span>
<input class="FormField-input" type="text" placeholder="Enter your surname">
<p class="FormField-text">Some text to the user about the input field</p>
</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:
<div class="FormField">
<label class="FormField-check">
<input class="FormField-checkInput" name="shopping" type="radio">
<span class="FormField-checkLabel">Apples</span>
</label>
<label class="FormField-check">
<input class="FormField-checkInput" name="shopping" type="radio">
<span class="FormField-checkLabel">Oranges</span>
</label>
<span class="FormField-text">Some text about the choices above</span>
</div>
Validation states
A state class of is-error
, is-success
or is-warning
can be applied to the
root element:
<div class="FormField is-error">
<label class="FormField-label">Surname</label>
<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 <form/>
itself:
<form class="UserForm">
<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="FormField">
<div class="Grid Grid--alignMiddle">
<div class="Grid-cell u-size2of12">
<label class="FormField-label u-textBold">Username</label>
</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+