The AvForm component wraps reactstrap's form to add context that the other Av components know about to help share validation state
import React from 'react';
import { AvForm, AvField, AvGroup, AvInput, AvFeedback, AvRadioGroup, AvRadio, AvCheckboxGroup, AvCheckbox } from 'availity-reactstrap-validation';
import { Button, Label, FormGroup, CustomInput } from 'reactstrap';
export default class FormExample extends React.Component {
render() {
return (
<AvForm>
{/* With AvField */}
<AvField name="name" label="Name" required />
{/* With AvGroup AvInput and AvFeedback to build your own */}
<AvGroup>
<Label for="example">Rank</Label>
<AvInput name="rank" id="example" required />
<AvFeedback>This is an error!</AvFeedback>
</AvGroup>
{/* Radios */}
<AvRadioGroup name="radioExample" label="Radio Buttons!" required errorMessage="Pick one!">
<AvRadio label="Bulbasaur" value="Bulbasaur" />
<AvRadio label="Squirtle" value="Squirtle" />
<AvRadio label="Charmander" value="Charmander" />
<AvRadio label="Pikachu" value="Pikachu" disabled />
</AvRadioGroup>
<AvRadioGroup inline name="radioExample2" label="Radio Buttons! (inline)" required>
<AvRadio label="Bulbasaur" value="Bulbasaur" />
<AvRadio label="Squirtle" value="Squirtle" />
<AvRadio label="Charmander" value="Charmander" />
<AvRadio label="Pikachu" value="Pikachu" disabled />
</AvRadioGroup>
<AvRadioGroup name="radioCustomInputExample" label="Custom Radio Buttons!" required>
<AvRadio customInput label="Bulbasaur" value="Bulbasaur" />
<AvRadio customInput label="Squirtle" value="Squirtle" />
<AvRadio customInput label="Charmander" value="Charmander" />
<AvRadio customInput label="Pikachu" value="Pikachu" disabled />
</AvRadioGroup>
<AvRadioGroup inline name="radioCustomInputExample2" label="Custom Radio Buttons! (inline)" required>
<AvRadio customInput label="Bulbasaur" value="Bulbasaur" />
<AvRadio customInput label="Squirtle" value="Squirtle" />
<AvRadio customInput label="Charmander" value="Charmander" />
<AvRadio customInput label="Pikachu" value="Pikachu" disabled />
</AvRadioGroup>
{/* checkboxes */}
<AvCheckboxGroup name="checkboxExample" label="Checkboxes!" required>
<AvCheckbox label="Bulbasaur" value="Bulbasaur" />
<AvCheckbox label="Squirtle" value="Squirtle" />
<AvCheckbox label="Charmander" value="Charmander" />
<AvCheckbox label="Pikachu" value="Pikachu" disabled />
</AvCheckboxGroup>
<AvCheckboxGroup inline name="checkboxExample2" label="Checkboxes! (inline)" required>
<AvCheckbox label="Bulbasaur" value="Bulbasaur" />
<AvCheckbox label="Squirtle" value="Squirtle" />
<AvCheckbox label="Charmander" value="Charmander" />
<AvCheckbox label="Pikachu" value="Pikachu" disabled />
</AvCheckboxGroup>
<AvCheckboxGroup name="checkboxCustomInputExample" label="Custom Checkboxes!" required>
<AvCheckbox customInput label="Bulbasaur" value="Bulbasaur" />
<AvCheckbox customInput label="Squirtle" value="Squirtle" />
<AvCheckbox customInput label="Charmander" value="Charmander" />
<AvCheckbox customInput label="Pikachu" value="Pikachu" disabled />
</AvCheckboxGroup>
<AvCheckboxGroup inline name="checkboxCustomInputExample2" label="Custom Checkboxes! (inline)" required>
<AvCheckbox customInput label="Bulbasaur" value="Bulbasaur" />
<AvCheckbox customInput label="Squirtle" value="Squirtle" />
<AvCheckbox customInput label="Charmander" value="Charmander" />
<AvCheckbox customInput label="Pikachu" value="Pikachu" disabled />
</AvCheckboxGroup>
{/* With select and AvField */}
<AvField type="select" name="select" label="Option" helpMessage="Idk, this is an example. Deal with it!">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</AvField>
<AvField type="select" name="select-multiple" label="Option" helpMessage="MULTIPLE!" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</AvField>
<FormGroup>
<AvGroup check>
<AvInput type="checkbox" name="checkbox" />
<Label check for="checkbox"> Check it out</Label>
</AvGroup>
<AvField type="checkbox" name="avFieldCheckbox" label="Check out this AvField checkbox" required />
<AvInput tag={CustomInput} type="checkbox" name="customCheckbox" label="Check out this custom input checkbox" required />
<AvField tag={CustomInput} type="checkbox" name="customCheckbox1" label="Check out this custom input checkbox from AvField" required />
</FormGroup>
<FormGroup>
<Button>Submit</Button>
</FormGroup>
</AvForm>
);
}
}
This callback is called with every submission of the form
import React from 'react';
import { AvForm, AvField, AvGroup, AvInput, AvFeedback, AvRadioGroup, AvRadio, AvCheckboxGroup, AvCheckbox } from 'availity-reactstrap-validation';
import { Button, Label, FormGroup } from 'reactstrap';
export default class Example extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {};
}
handleSubmit(event, errors, values) {
this.setState({errors, values});
}
render() {
return (
<div>
<AvForm onSubmit={this.handleSubmit}>
{/* With AvField */}
<AvField name="name" label="Name" required />
{/* With AvGroup AvInput and AvFeedback to build your own */}
<AvGroup>
<Label for="example">Rank</Label>
<AvInput name="rank" id="example" required />
{/* this only shows when there is an error, use reactstrap's FormFeedback if you want is to always be displayed */}
<AvFeedback>This is an error!</AvFeedback>
</AvGroup>
{/* Radios */}
<AvRadioGroup inline name="radioExample4" label="Radio Buttons! (inline)" required>
<AvRadio label="Bulbasaur" value="Bulbasaur" />
<AvRadio label="Squirtle" value="Squirtle" />
<AvRadio label="Charmander" value="Charmander" />
<AvRadio label="Pikachu" value="Pikachu" disabled />
</AvRadioGroup>
{/* Checkboxes */}
<AvCheckboxGroup inline name="checkboxExample4" label="Checkboxes! (inline)" required>
<AvCheckbox label="Bulbasaur" value="Bulbasaur" />
<AvCheckbox label="Squirtle" value="Squirtle" />
<AvCheckbox label="Charmander" value="Charmander" />
<AvCheckbox label="Pikachu" value="Pikachu" disabled />
</AvCheckboxGroup>
{/* With select and AvField */}
<AvField type="select" name="select" label="Option" helpMessage="Idk, this is an example. Deal with it!">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</AvField>
<AvField type="select" name="select-multiple" label="Option" helpMessage="MULTIPLE!" multiple required>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</AvField>
<FormGroup>
<Button>Submit</Button>
</FormGroup>
</AvForm>
{this.state.values && <div>
<h5>Submission values</h5>
Invalid: {this.state.errors.join(', ')}<br />
Values: <pre>{JSON.stringify(this.state.values, null, 2)}</pre>
</div>}
</div>
);
}
}
This callback is called only when every field is valid when submitted
import React from 'react';
import { AvForm, AvField, AvGroup, AvInput, AvFeedback, AvRadioGroup, AvRadio, AvCheckboxGroup, AvCheckbox } from 'availity-reactstrap-validation';
import { Button, Label, FormGroup } from 'reactstrap';
export default class Example extends React.Component {
constructor(props) {
super(props);
this.handleValidSubmit = this.handleValidSubmit.bind(this);
this.state = {};
}
handleValidSubmit(event, values) {
this.setState({values});
}
render() {
return (
<div>
<AvForm onValidSubmit={this.handleValidSubmit}>
{/* With AvField */}
<AvField name="name" label="Name" required />
{/* With AvGroup AvInput and AvFeedback to build your own */}
<AvGroup>
<Label for="example">Rank</Label>
<AvInput name="rank" id="example" required />
{/* this only shows when there is an error, use reactstrap's FormFeedback if you want is to always be displayed */}
<AvFeedback>This is an error!</AvFeedback>
</AvGroup>
{/* Radios */}
<AvRadioGroup inline name="radioExample5" label="Radio Buttons! (inline)" required>
<AvRadio label="Bulbasaur" value="Bulbasaur" />
<AvRadio label="Squirtle" value="Squirtle" />
<AvRadio label="Charmander" value="Charmander" />
<AvRadio label="Pikachu" value="Pikachu" disabled />
</AvRadioGroup>
{/* Checkboxes */}
<AvCheckboxGroup inline name="checkboxExample5" label="Radio Buttons! (inline)" required>
<AvCheckbox label="Bulbasaur" value="Bulbasaur" />
<AvCheckbox label="Squirtle" value="Squirtle" />
<AvCheckbox label="Charmander" value="Charmander" />
<AvCheckbox label="Pikachu" value="Pikachu" disabled />
</AvCheckboxGroup>
{/* With select and AvField */}
<AvField type="select" name="select" label="Option" helpMessage="Idk, this is an example. Deal with it!">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</AvField>
<FormGroup>
<Button>Submit</Button>
</FormGroup>
</AvForm>
{this.state.values && <div>
<h5>Submission values</h5>
Values: <pre>{JSON.stringify(this.state.values, null, 2)}</pre>
</div>}
</div>
);
}
}
This callback is called only when any field is invalid when submitted
import React from 'react';
import { AvForm, AvField, AvGroup, AvInput, AvFeedback, AvRadioGroup, AvRadio, AvCheckboxGroup, AvCheckbox } from 'availity-reactstrap-validation';
import { Button, Label, FormGroup } from 'reactstrap';
export default class Example extends React.Component {
constructor(props) {
super(props);
this.handleInvalidSubmit = this.handleInvalidSubmit.bind(this);
this.state = {};
}
handleInvalidSubmit(event, errors, values) {
this.setState({errors, values});
}
render() {
return (
<div>
<AvForm onInvalidSubmit={this.handleInvalidSubmit}>
{/* With AvField */}
<AvField name="name" label="Name" required />
{/* With AvGroup AvInput and AvFeedback to build your own */}
<AvGroup>
<Label for="example">Rank</Label>
<AvInput name="rank" id="example" required />
{/* this only shows when there is an error, use reactstrap's FormFeedback if you want is to always be displayed */}
<AvFeedback>This is an error!</AvFeedback>
</AvGroup>
{/* Radios */}
<AvRadioGroup inline name="radioExample3" label="Radio Buttons! (inline)" required>
<AvRadio label="Bulbasaur" value="Bulbasaur" />
<AvRadio label="Squirtle" value="Squirtle" />
<AvRadio label="Charmander" value="Charmander" />
<AvRadio label="Pikachu" value="Pikachu" disabled />
</AvRadioGroup>
{/* Radios */}
<AvCheckboxGroup inline name="checkboxExample3" label="Checkboxes! (inline)" required>
<AvCheckbox label="Bulbasaur" value="Bulbasaur" />
<AvCheckbox label="Squirtle" value="Squirtle" />
<AvCheckbox label="Charmander" value="Charmander" />
<AvCheckbox label="Pikachu" value="Pikachu" disabled />
</AvCheckboxGroup>
{/* With select and AvField */}
<AvField type="select" name="select" label="Option" helpMessage="Idk, this is an example. Deal with it!">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</AvField>
<FormGroup>
<Button>Submit</Button>
</FormGroup>
</AvForm>
{this.state.values && <div>
<h5>Submission values</h5>
Invalid: {this.state.errors.join(', ')}<br />
Values: <pre>{JSON.stringify(this.state.values, null, 2)}</pre>
</div>}
</div>
);
}
}
Pass an object in which the keys correspond to the name props of the form's input to set their initial value. Nested objects can be accessed via dot notation. Individual array indexes can be accessed via bracket notation. The values object returned to the various submissions handlers will reflex the object shape. Behind the scenes, lodash's get and set are being used, look at lodash's documentation to learn more about how to access complex data in the model.
import React from 'react';
import { AvForm, AvField, AvGroup, AvInput, AvFeedback, AvRadioGroup, AvRadio, AvCheckboxGroup, AvCheckbox } from 'availity-reactstrap-validation';
import { Button, Row, Col, Label, FormGroup } from 'reactstrap';
export default class Example extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {};
}
handleSubmit(event, errors, values) {
this.setState({errors, values});
}
render() {
const defaultValues = {
locationType: 'work',
locationQualities: [
'beautiful',
'awesome',
'wonderful',
],
name: 'Availity',
location: {
street: '10752 Deerwood Park Blvd',
suite: '110',
city: 'Jacksonville',
state: 'Florida',
zip: '32256',
},
checkItOut: true,
};
return (
<div>
<AvForm onSubmit={this.handleSubmit} model={defaultValues}>
{/* Radios */}
<AvRadioGroup inline name="locationType" label="Location Type" required>
<AvRadio label="Residential" value="home" />
<AvRadio label="Business" value="work" />
<AvRadio label="Awesome" value="awesome" />
</AvRadioGroup>
{/* Checkboxes */}
<AvCheckboxGroup inline name="locationQualities" label="Location Qualities" required>
<AvCheckbox label="Beautiful" value="beautiful" />
<AvCheckbox label="Awesome" value="awesome" />
<AvCheckbox label="Wonderful" value="wonderful" />
</AvCheckboxGroup>
{/* With AvField */}
<AvField name="name" label="Name" required />
<Row>
<Col xs="12" sm="8">
{/* With AvGroup AvInput and AvFeedback to build your own */}
<AvGroup>
<Label for="street">Street</Label>
{/* dot notation for the name to access deep values. The shape is also the same in the submit callbacks */}
<AvInput name="location.street" id="street" required />
{/* this only shows when there is an error, use reactstrap's FormFeedback if you want is to always be displayed */}
<AvFeedback>This is an error!</AvFeedback>
</AvGroup>
</Col>
<Col xs="12" sm="4">
<AvField name="location.suite" label="Suite" required />
</Col>
</Row>
<Row>
<Col xs="12" sm="5">
<AvField name="location.city" label="City" required />
</Col>
<Col xs="6" sm="4">
{/* With select and AvField */}
<AvField type="select" name="location.state" label="State" helpMessage="This is an example. Deal with it!" required>
<option>Something</option>
<option>Something else</option>
<option>Florida</option>
<option>This is just an exmaple</option>
<option>Not Florida</option>
</AvField>
</Col>
<Col xs="6" sm="3">
<AvField name="location.zip" label="ZIP Code" required />
</Col>
</Row>
<AvGroup check>
<AvInput type="checkbox" name="checkItOut" />
<Label check for="checkItOut">Check it out!</Label>
</AvGroup>
<FormGroup>
<Button>Submit</Button>
</FormGroup>
</AvForm>
{this.state.values && <div>
<h5>Submission values</h5>
Invalid: {this.state.errors.join(', ')}<br />
Values: <pre>{JSON.stringify(this.state.values, null, 2)}</pre>
</div>}
</div>
);
}
}