React-Formsy form elements
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dev
dist
src/components
support
.babelrc
.eslintrc.js
.gitignore
README.md
bundle.js
package.json

README.md

React Form Elements

This is a set of form elements for React implemented as Formsy components.

Usage

First, install the package in your project:

npm install --save git+ssh://git@github.com:levelupify/react-form-elements.git

Then import the parts you want to use:

import {
  Textfield,
  Textarea,
  Checkbox,
  Dropdown,
  SearchableDropdown
} from 'react-form-elements';

Then, use them in the render method of your components:

<Formsy.Form ...>
  <Textfield ... />
  <Checkbox ... />
  <Dropdown>
    ...
  </Dropdown>
</Formsy.Form>

Most components accept the standard props for the HTML elements they represent, ie. Textfield accepts placeholder, value etc.

Styling

The components can be styled by targetting the class .lvlp-, for example:

.lvlp-textfield {
  background-color: #ddd;
}

.lvlp-checkbox {
  border: none;
}

The class is applied to the outermost HTML element of the component, so if a component adds one or more wrappers around the actual form elements you may need to target sub-elements:

.lvlp-textfield input {
  background-color: #ddd;
}

.lvlp-textarea textarea {
  border: none;
}

Look at the source or use your browser’s inspect tool to figure out the structure of a given component.