The <label> elements in examples are not connected to their fields

In the example in the readme, as well as some (all?) codesandbox examples (such as https://codesandbox.io/s/yk1zx56y5j), use markup like this:

<div>
  <label>Label</label>
  <Field />
</div>

But that doesn’t connect the label to the field. Most notably, it’s not possible to click the label text to focus the field. And I guess screen readers won’t announce what the fields are for.

To connect a label to a field, you can either use IDs:

<div>
  <label for="myfield">Label</label>
  <Field id="myfield" />
</div>

Or nesting (might require slightly changing styles):

<label>
  <span>Label</span>
  <Field />
</label>

People often copy-paste from examples, so I think it would be nice if they don’t include this mistake.

Thanks!

(This is probably a good first issue for aspiring contributors.)

[Noitidart]

First issue I hit when I came to final-form. Is there a way to “auto-id” and set the “for” to be that?

[Noitidart]

What I did was useMemo with an empty array so it never recalculates the id - https://stackoverflow.com/q/55309140/1828637

I don’t like it. I hoped that the form lib would take care of this for us.

import React, { useMemo } from 'react';
import { Form, Field } from 'react-final-form';
import { uniqueId } from 'lodash';

function TaskForm() {

    const id = useMemo(() => uniqueId('_form'), []);
    const getFor = name => name + id;

    return (
        <>
            <h3>Create a task</h3>
            <Form onSubmit={onSubmit}>
                {({ handleSubmit, pristine, invalid, ...rest }) => {(
                    <form onSubmit={handleSubmit}>
                        <div className="form-group">
                            <label htmlFor={getFor('firstName')}>First Name</label>
                            <Field name="firstName" id={getFor('firstName')} component="input" placeholder="First Name" />
                        </div>

                        <button type="submit" disabled={pristine || invalid}>Submit</button>
                    </form>
                )}}
            </Form>
        </>
    );
}