<h4>Default</h4>

```jsx
import { Form, FormField } from 'frontend-react-components';

<FormField
    label="This is a label"
    help="This is some help text"
    note="This is a note"
    children={<Form.Control type="email" placeholder="Enter email" />}
/>
```
---

<h4>Basic layout</h4>

```jsx
import { Form, FormField, Help, InputGroup } from 'frontend-react-components';

<>
    <InputGroup>
        <FormField
            label="Email"
            help="This is some help text"
            children={<Form.Control type="email" placeholder="Email" />}
        />
    </InputGroup>
    <Form.Label>
        <span>Name</span>
        <Help id="help-1" message="Helpful text" />
    </Form.Label>
    <div className="form-row">
        <div className="col-md-3">
            <FormField
                children={<Form.Control type="text" placeholder="First Name" />}
            />
        </div>
        <div className="col-md-3">
            <FormField
                children={<Form.Control type="text" placeholder="Last Name" />}
            />
        </div>
    </div>
</>
```
---

<h4>Inline layout</h4>

```jsx
import { Form, FormField, Help } from 'frontend-react-components';

<>
    <FormField
        label="Name"
        help="This is some help text"
        children={<Form.Control type="email" placeholder="Name" />}
    />
    <Form.Label>
        <span>Name</span>
        <Help id="help-1" message="Helpful text" />
    </Form.Label>
    <div className="form-row">
        <div className="form-group col-md-6">
            <FormField
                children={<Form.Control type="text" placeholder="First Name" />}
            />
        </div>
        <div className="form-group col-md-6">
        <FormField
            children={<Form.Control type="text" placeholder="Last Name" />}
        />
        </div>
    </div>
</>
```
---

<h4>isRequired</h4>

```jsx
import { Form, FormField } from 'frontend-react-components';

<FormField
    label="This is a label"
    help="This is some help text"
    note="This is a note"
    isRequired
    children={<Form.Control type="email" placeholder="Enter email" />}
/>
```

<h4>labelAppendix</h4>

```jsx
import { Form, FormField } from 'frontend-react-components';

<FormField
    label="This is a label"
    help="This is some help text"
    note="This is a note"
    isRequired
    children={<Form.Control type="email" placeholder="Enter email" />}
/>
```

<h4>Validation Error</h4>

```jsx
import { Form, FormField } from 'frontend-react-components';

<FormField
    label="This is a label"
    help="This is some help text"
    note="This is a note"
    errorMessage="This is an error message"
    children={<Form.Control type="email" placeholder="Enter email" />}
/>
```
