# CSS Toolkit - Form

[![npm version](https://badge.fury.io/js/css-toolkit-form.svg)](https://badge.fury.io/js/css-toolkit-form)

A CSS Toolkit module that templates common structural form elements to be 
extended with modifier classes.

## Installation

* [npm](http://npmjs.org/): `npm install css-toolkit-form`

## Available Classes

* `form-control` - [form controls]
* `checkbox` - [checkboxs]
* `radio` - [radios]
* `form-group` - Any group of form control, vertical rhythm for forms.

## Configuration

Adjust the custom properties to change the base defaults using [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties). For Example:

* `--form-padding: .375rem .75rem;`
* `--form-color: #333;`
* `--form-background: #fff;`
* `--form-border-width: 1px;`
* `--form-border-color: currentColor;`
* `--form-vertical-rhythm: 1rem;`

## Use

Examples:

```html
<form>

  <fieldset class="form-group">
    <label for="exampleInputEmail">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail" placeholder="jane.doe@example.com">
    <small>We'll never share your email with anyone else.</small>
  </fieldset>

  <fieldset class="form-group">
    <label for="exampleInputPassword">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
  </fieldset>

  <fieldset class="form-group">
    <label for="exampleSelect1">Example select</label>
    <select class="form-control" id="exampleSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </fieldset>

  <fieldset class="input-group">
    <label for="exampleTextarea">Textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </fieldset>

  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>

  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
      Option two can be something else and selecting it will deselect option one
    </label>
  </div>

  <div class="radio disabled">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
      Option three is disabled
    </label>
  </div>

  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>

</form>
```

### Theming / Extending

As the module focuses on common structural styles, You can build your
website-specific theme styles in your build process with PostCSS. For example:

```css
@import "css-toolkit-form";


```

## Testing

Install [Node](http://nodejs.org) (comes with npm).

```
npm install
```

To generate a build:

```
npm run build
```

Basic visual tests are in `test/index.html`.

## Browser Support

* Edge
* Firefox
* Google Chrome
* Internet Explorer 11+
* Opera
* Safari