Home

Awesome

SUIT CSS components-form-field

Build Status

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

States

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-input

FormField-text

FormField-select

FormField-check

Validation states

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