Notes
This package provides a selection of components that render form elements for use within a formsy-react form.
By default, the element is wrapped with tags that provide the boilerplate to help include it in a Bootstrap form. This includes a <label>
, help text, and some validation styling tied to formsy’s validation state and validation messages.
<Input
type="text"
name="my-element"
label="Label"
help="Some help text to be displayed near the control."
/>
[EXAMPLE OUTPUT GOES HERE]
Properties
help
React.PropTypes.string
label
React.PropTypes.string
Rendered as label text for the element.
layout
React.PropTypes.oneOf('horizontal', 'vertical', 'elementOnly')
--- default: 'horizontal'
Modifies the markup and classes that wrap the form element.
If not 'horizontal' renders as a standard bootstrap form instead.
I've chosen col-sm-3
for the labels, and col-sm-9
for the element. It's on the roadmap to make these configurable.
validatePristine
React.PropTypes.bool
--- default: false
Whether to present validation notices on pristine elements.
disabled
React.PropTypes.bool
Works in conjunction with Formsy.Mixin isFormDisabled.
Formsy.Mixin properties
- You can pass any Formsy.Mixin property.
Other properties
- Other properties are passed through to the form element, and React will render these according to it’s HTML attribute whitelist. For example a
placeholder
property passed to the component would be applied to the form control within the component.
https://github.com/IlyaSerdyuk/zend1-bootstrap3
## Input elements
### Button types
button
reset
submit
### Radio / Checkbox
checkbox
radio
### Texty types
text
password
hidden
email
url
tel
file
color
image
number
range
search
### Date / time
date
datetime
datetime-local
time
week
month
Common properties
- name:
React.PropTypes.string
- See formsy-react docs.
- value:
mixed type
- See formsy-react docs.
- help:
React.PropTypes.string
- onChange:
React.PropTypes.func
- If supplied, callback signature is (name, value) where
name
is the name of the element, andvalue
is it's value.