Downshift: Add Label component

[kentcdodds]

Related to #36: One thing that you want for a11y is a label for your input. Normally this is done by putting an id on the input and a for="the-id" on a label. So we could expose a Label component that automatically hooks up with the Input. That could be nice because it could generate a random ID to label the input. If the user provides an id prop to the Input, then we use that.

[souporserious]

Would this make sense for Dropdowns? So you would use <Label/> with <Menu/> and <Item/>? Thinking this would work perfect for that example I recently posted.

I can work on this today by the way 😉

[kentcdodds]

Sounds great.

As an aside: normally I would like to avoid adding things to the API like this (because it can clearly be done on your own), but in the case of accessibility, I want to make the pit of success as wide as possible and I want autocompletes built with these primitives to be as accessible as possible.

[souporserious]

I just started implementing this and I'm wondering if it's necessary now. A label could be used to either focus the Input or a Button which makes things a little more complex now. Since it's not terribly hard to hook up an id and htmlFor maybe we just mention this in the docs and show a simple example?

[davidnguyen179]

It is more nice with material style. I will update label to my example

[souporserious]

After the recent API changes, do you think it would be helpful to add an id to controller state to make building labels super easy? Or we can just leave it up the user since all we'll really be doing is adding a unique id.

[kentcdodds]

Well the label would have a for assigned to the same thing that's the id that's applied to the input right? So we could generate a random ID per instance of the Autocomplete component and in getInputProps return that randomly generated ID. Then a getLabelProps that returns htmlFor: 'the-random-id'

Should be pretty simple and also widen the a11y pit of success.

[CMTegner]

That could be nice because it could generate a random ID to label the input.

Note that this doesn't play well with SSR in React 15. Checksums are going away in v16, so eventually this won't be a problem :)