Please use the following:
- @nib-components/form
- @nib-components/form-control
- @nib-components/textbox
- @nib-components/textarea
- @nib-components/password-textbox
- @nib-components/select
- @nib-components/checkbox
- @nib-components/checkbox-group
- @nib-components/radio
- @nib-components/radio-group
- @nib-components/divider
Components for creating React based forms at nib.
npm install --save @nib-components/react-form
import Form from '@nib-components/react-form';
<Form title="A React form">
<Form.Control valid={true} label="What's your name" help="Please enter your first name.">
<Form.Text/>
</Form.Control>
</Form>A form component - provides form markup and behaviour.
<Form title="Join" theme="green"
- title - A title displayed to the user
- theme - A theme name -
white,greyorgreen- defaults towhite - onSubmit - A function for doing stuff when the form is submitted
A control component - provides control markup and behaviour.
<Form.Control label="First Name"></Form.Control>
- name - The name of the control
- label - A label displayed to the user (required)
- help - Extra supporting text for the field
- error - An error displayed to the user
- valid - Whether the control is valid
- validated - Whether the user has interacted and left the field
<Form.Text></Form.Text>
<Form.TextArea></Form.TextArea>
A select box.
<Form.Select options={mr: 'Mr', mrs: 'Mrs'}></Form.Select>
- options - Either: (required)
- An object containing key-value pairs e.g.
{ male: 'Male', female: 'Female' }
- An array of objects containing specific keys e.g.
[ {value: 'male', label: 'Male'}, {value: 'female', label: 'Female'}, ]
- An object containing key-value pairs e.g.
- placeholder - Default text for select, with no value
See @nib-components/radio.
See @nib-components/radio-group.
See @nib-components/button.
A horizontal rule.
<Form.Divider />
- break: removed
defaultValueprop fromRadioGroupandCheckboxGroup - moved
RadioandRadioGroupimplementation to@nib-components/radioand@nib-components/radio-group
- fix: forgot to import
classnames
- add: allow custom classname to be set on
Form.Control - add: allow custom classname and custom props to be set on
Form.Divider
- break: wrap
Form.Dividercomponents in a<div className="form__control"/>because the element's margin was removed in@nib-styles/react-form@0.8.0 - fix: update the class name used by
Form.Dividerbecause it was changed in@nib-styles/react-form@0.8.0
- fix: no longer require a
nameprop on aControl
- fix: ignore additional
redux-formoprops
- add: strip additional properties passed down by
redux-formoto avoid [Unkown Prop Warning](https://facebook .github.io/react/warnings/unknown-prop.html) emitted byreact@>=15.2
- add: allow a custom class to be placed on radio elements
- fix: add a
label--disabledclass when the control is disabled
- add: a
*--disabledclass to each of the components when adisabledproperty is present
- add: the ability to add a custom
classNameto aForm
- initial value