The form elements are based off React Bootstrap's form elements.  If you can't find what you are looking for in the following section make sure to read [React Bootstrap Form](https://react-bootstrap.github.io/components/forms/).

The Label is built off Bootstrap's Form.Label and customized to be the Orchard's standard label.  The Orchard's Control component takes an input field as children and adds a note and error message below them.

The Field and InlineField are shortcut components that give you standard Orchard fields, if you need to make something more complex you can fallback to the Label and Control to build your own like the C-Line example below.

The error state will only show if embedded under a class .was-validated.  The recommended way to use this is the bootstrap `<Form validated={true}>` tag which adds this class.


```js
import Col from 'react-bootstrap/Col'
import Row from 'react-bootstrap/Row'
import { Label, Control, Form, Field, Button, AddGlyph } from 'frontend-react-components';

initialState = { validated: false };
onSubmit = (event) => {
    event.preventDefault();
    setState({ validated: true });
}
<Form validated={ state.validated } onSubmit={ onSubmit }>
    <Field
        controlId="email1"
        labelText="This is a Label"
        helpText="Help text"
        isRequired
        errorMessage="Email is required."
        note="Enter email"
    >
        <Form.Control type="email" placeholder="Enter email"/>
    </Field>

    <Form.Group controlId="cLine">
        <Row>
            <Col xs={4}>
                <Label text="(C) Line" help="C LINE!!!" isRequired helpId="helpMe" />
            </Col>
            <Col xs={3}>
                <Control note="Year Of Recording">
                    <Form.Control type="text" />
                </Control>
            </Col>
            <Col xs={5}>
                <Control note="Original Copyright Owner">
                    <Form.Control type="text" />
                </Control>
            </Col>
        </Row>
    </Form.Group>

    <Control className="FRCControl-append">
      <Form.Control placeholder="00:00.00" />
        <Button className="icon-left">
          <AddGlyph />
          Add
        </Button>
    </Control>

    <Button type="submit">Submit form</Button>
</Form>
```