https://github.com/giuseppeg/suitcss-components-form
A CSS form component.
https://github.com/giuseppeg/suitcss-components-form
Last synced: 5 months ago
JSON representation
A CSS form component.
- Host: GitHub
- URL: https://github.com/giuseppeg/suitcss-components-form
- Owner: giuseppeg
- License: mit
- Created: 2015-12-26T19:00:58.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-09-27T08:57:44.000Z (almost 10 years ago)
- Last Synced: 2025-10-05T01:19:11.598Z (10 months ago)
- Language: HTML
- Homepage: http://giuseppeg.github.io/suitcss-components-form/test
- Size: 19.5 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# SUIT CSS components-form
[](http://travis-ci.org/giuseppeg/suitcss-components-form)
Component CSS for forms. Provides general styling to build hightly composable and consistent forms.
Read more about [SUIT CSS](https://github.com/suitcss/suit/).
## Installation
* [npm](https://www.npmjs.org/package/suitcss-components-form): `npm install suitcss-components-form`
* Download: [zip](https://github.com/giuseppeg/suitcss-components-form/releases/latest)
## Features
* Full-width forms
* Inter-fields vertical spacing
* Fields adapt to the dimensions of an ancestral context
* Simple Custom Select
* Basic validation states
## Available classes
* `Form` core component
* `Form--spaced` adds spacing between form fields
* `Form-field` a form field container
* `Form-field--checkbox` checkbox input modifier
* `Form-field--radio` radio input modifier
* `Form-label` form label text
* `Form-input` the actual form input
* `Form-message` an (optional) form message
## Use
A form can have any number of fields. Each form field must contain a single
form input, label and optionally a message.
```html
Field
```
### Special form fields
Basic styles for more complex form fields are included in this component.
#### Buttons
Buttons are not styled. You are free to style buttons as you please or use an existing component like [suitcss-button](https://github.com/suitcss/components-button).
SUIT CSS Form however provides two classes:
* `.Form-button` – Attaches to a nested component
* `.Form-wrapButton` – Wraps a nested component
Both make buttons [full-width](https://github.com/suitcss/suit/blob/master/doc/components.md#adapting-to-ancestral-context) and consistent with the `Form` styles by tweaking padding, borders and border radii only.
Read more about how to [style dependencies](https://github.com/suitcss/suit/blob/master/doc/components.md#styling-dependencies).
```html
Field
Submit
Submit
```
Tip: Use an utility class e.g. `u-inlineBlock` when you don't want full-width buttons.
#### Checkbox and Radio inputs
* `Form-field--checkbox`
* `Form-field--radio`
Checkbox and radio inputs are `Form-field` modifiers.
Use one `Form-field` per `Form-input`.
```html
Field
Field
```
#### Custom Select
Modern browsers that support the CSS3 `appearance` property
get basic custom select styles without any additional class
needed:
* Padding, border and border radii match other inputs styles.
* Custom arrow.
### Horizontal forms
Use a layout component like [suitcss-grid](https://github.com/suitcss/components-grid).
### Vertical spacing between Form-field
`Form--spaced` adds uniform vertical space between `Form-field`.
```html
Field
Field
Field
```
N.B. Checkboxes or radio inputs are grouped and the space between each
is half of the regular `Form-field` margin.
### Basic Form validation styles
Basic styles for **visual** validation state classes for the `Form-field`:
* `is-valid`
* `is-invalid`
* `is-warning`
## Configurable properties
Properties names are self explainatory.
#### .Form-label
* `--Form-label-color`
* `--Form-label-font-size`
* `--Form-label-font-weight`
#### .Form-input
* `--Form-input-border-color`
* `--Form-input-border-radius`
* `--Form-input-color`
* `--Form-input-font-size`
* `--Form-input-padding`
#### checkbox and radio
* `--Form-checkradio-gutter` vertical space between the form input and the label.
#### Custom <select> arrow
* `--Form-select-arrow` `url(imageUrl|base64 encoded image)` – must include `url()`
* `--Form-select-arrow-width`
#### .Form-message
* `--Form-message-color`
* `--Form-message-font-size`
#### .Form--spaced
* `--Form--spaced-margin`
### .Form-field's State
#### .Form-field.is-valid
* `--Form-state-valid-border-color`
* `--Form-state-valid-label-color`
* `--Form-state-valid-message-color`
#### .Form-field.is-invalid
* `--Form-state-invalid-border-color`
* `--Form-state-invalid-label-color`
* `--Form-state-invalid-message-color`
#### .Form-field.is-warning
* `--Form-state-warning-border-color`
* `--Form-state-warning-label-color`
* `--Form-state-warning-message-color`
## Testing
Install [Node](http://nodejs.org) (comes with npm).
```
npm install
```
To generate a build:
```
npm run build
```
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 5.1+
* Internet Explorer 8+
* Android 2.2+
* iOS 5.1+
* Windows Phone 8.1