Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simonsmith/suitcss-components-form-field
Component CSS for form fields
https://github.com/simonsmith/suitcss-components-form-field
component component-css component-form form suitcss
Last synced: 7 days ago
JSON representation
Component CSS for form fields
- Host: GitHub
- URL: https://github.com/simonsmith/suitcss-components-form-field
- Owner: simonsmith
- License: mit
- Created: 2017-05-02T21:34:11.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-01-21T21:11:02.000Z (almost 4 years ago)
- Last Synced: 2024-10-18T08:36:18.185Z (27 days ago)
- Topics: component, component-css, component-form, form, suitcss
- Language: HTML
- Homepage: https://simonsmith.io/suitcss-components-form-field/test/index.html
- Size: 51.8 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# SUIT CSS components-form-field
[](https://travis-ci.org/simonsmith/suitcss-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](https://github.com/suitcss/suit/).
## Installation
* [npm](http://npmjs.org/): `npm install suitcss-components-form-field`
* Download: [zip](https://github.com/simonsmith/suitcss-components-form-field/releases/latest)
## Example
* [**View a demo**](https://simonsmith.github.io/suitcss-components-form-field/test/demo.html)
* [**View the tests**](https://simonsmith.github.io/suitcss-components-form-field/test/index.html)
## 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`.
```html
Surname
Some optional text to the user about the input field
```
### Select elements
Select elements require their own class name to ensure consistent rendering in
Blink/Webkit.
```html
Select
Some option
Another option
```
### Using a `label` container
```html
Surname
Some text to the user about the input field
```
### 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:
```html
Apples
Oranges
Some text about the choices above
```
### Validation states
A state class of `is-error`, `is-success` or `is-warning` can be applied to the
root element:
```html
Surname
There was a problem!
```
### Controlling layout
`FormField` leaves the layout concerns to another component or utility, for
example [suitcss-components-grid](https://github.com/suitcss/components-grid).
#### Vertical spacing
Can be handled by a component that controls the `` itself:
```html
// ...
// ...
```
#### Horizontal positioning with `Grid` and `utils-size`
The following achieves an inline form effect
```html
Username
That username is already taken!
```
### 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](http://nodejs.org) (comes with npm).
```
npm install
```
To generate a build:
```
npm run build
```
To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)
```
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+