Skip to content

simonsmith/suitcss-components-form-field

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

  • npm: npm install suitcss-components-form-field
  • Download: zip

Example

Available classes

Component structure

  • FormField - Containing element. Apply state classes to this
  • FormField-input - Consistent rendering of various form inputs
  • FormField-select - Used for select elements only (instead of FormField-input)
  • FormField-label - Label text for the input
  • FormField-text - Used to display help text or validation messages
  • FormField-check - Wraps around input and label when using either radio or checkbox inputs
  • FormField-checkInput - The input class when inside FormField-check
  • FormField-checkLabel - The label when inside FormField-check

States

  • is-error - Applies the error colours to each element
  • is-warning - Applies the warning colours to each element
  • is-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+