Cannot use Textfield: A11y: A form label must be associated with a control.

[sswam]

I am attempting to use the Textfield widget with Svelte / Sapper.
I had the same error described here: #199
Error: Mixin mdc-typography has no parameter named $exclude-props
I solved this by running npm install @material/[email protected].
So please update that dependency from ^3.1.0 to whatever version is needed.

Now I am getting a new error:

node_modules/@smui/textfield/Textfield.svelte
A11y: A form label must be associated with a control.
1: {#if valued}
2:   <label
     ^
3:     bind:this={element}
4:     use:useActions={use}

See also here: sveltejs/svelte#5300

It seems that the <label> component must refer to the main <Input> or <Textarea> component using a for attribute refering to its id. But we don't necessarily have an ID. Also, I have only imported the module, have not added a <Textfield> to my page yet.

I don't know how to resolve this. Can you please advise? I'd be happy to make a donation to the project if that can help. Thanks.

[sswam]

I see someone posted a "hacky" fix for these warnings here: #164
(I had thought they were fatal errors, apparently not.) Thanks.

[hperrin]

This is fixed in the latest version.

[hperrin]

Technically, the Svelte warning is wrong, not SMUI. A label can have a for attribute, or it can wrap around the input and the label (which is what SMUI does). To suppress this warning, since SMUI knows that there is an input underneath the label element, I assign a for={null} attribute to the label.

[hperrin]

To associate the <label> with an <input> element, you need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input's id.
Alternatively, you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit:
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label