npm install --save @doguh/react-form
import React, { Component } from 'react';
import { Form, Field } from '@doguh/react-form';
class Example extends Component {
state = {
user: {
name: 'Señor Chang',
},
};
render() {
return (
<Form
values={this.state.user}
onSubmit={values => {
console.log(values);
this.setState({ user: values });
}}
>
<label>
Name <Field name="name" type="text" />
</label>
<label>
Over 18 <Field name="accept" type="checkbox" />
</label>
<div>
Gender
<label>
Male <Field name="gender" value="male" type="radio" />
</label>
<label>
Female <Field name="gender" value="female" type="radio" />
</label>
<label>
Other <Field name="gender" value="other" type="radio" />
</label>
</div>
<button type="submit">Submit</button>
</Form>
);
}
}
Name | Default | Type | Description |
---|---|---|---|
values |
object |
Values to fill the form with | |
onSubmit |
function |
Function called when the form is submitted It has the following signature: function(values, event) |
Name | Default | Type | Description |
---|---|---|---|
name (required) |
string |
Input field's name. The name should be unique accross the Form's Fields, except for checkbox or radio types. |
|
component |
'input' |
string|component |
The component used in the field. It can be a string ( 'input' , 'select' , 'textarea' ) or any Component that accepts onChange and value props. |
type |
'text' |
string |
Input field's type ('checkbox' , 'radio' , 'passsword' , etc.) |
value |
string |
Input field's value. It should only be used when type is checkbox (optional) or radio (required). |
|
multiple |
boolean |
Indicates if the field accepts an array of values. Affects only with select components. |
|
inputProps |
object |
These props will be passed to the component used to render the Field. |
MIT © doguh