v33.3.1
Tools
field-with-htmlfor
Enforces the use of htmlFor in Fields and matching ids in the internal inputs
This rule suggests the use of htmlFor in Fields and id in inputs, and reinforces that those two props should be the same. Matching the htmlFor and id props improves accessibility - if they don't match, the input is not linked to the label inside Field, and consequently cannot be hovered, focused, or selected when clicking the label.
Severity
Recommended severity: warning
rules: {'@carta/ink-rules/field-with-htmlfor': 1,}
Components affected by this rule
All ink inputs except the ones that can have multiple instances inside one Field: Checkbox, Radio, NewCheckbox and NewRadio.
Examples
<Field isStacked><NewTextArea /></Field>
<Field isStacked htmlFor="newinput-id"><NewInput id="newinput-id" /></Field>
Don't
Use Field and inputs without `htmlFor` and `ids`
Do
Use `htmlFor` in your `Field` and matching `id` on your input
<Field isStacked><NewTextArea /></Field>
Don't
Use Field and inputs without `htmlFor` and `ids`
<Field isStacked htmlFor="newinput-id"><NewInput id="newinput-id" /></Field>
Do
Use `htmlFor` in your `Field` and matching `id` on your input
<Ink.Field isStacked><Ink.NewTextArea id="newtextarea-id" /></Ink.Field>
<Ink.Field isStacked htmlFor="ink-field-id"><Ink.NewDatePicker /></Ink.Field>
<Ink.Field isStacked htmlFor="newtextarea-id"><Ink.NewTextArea id="newtextarea-id" /></Ink.Field>
Don't
Use just one or the other
Do
Use both `htmlFor` and `id`
<Ink.Field isStacked><Ink.NewTextArea id="newtextarea-id" /></Ink.Field>
<Ink.Field isStacked htmlFor="ink-field-id"><Ink.NewDatePicker /></Ink.Field>
Don't
Use just one or the other
<Ink.Field isStacked htmlFor="newtextarea-id"><Ink.NewTextArea id="newtextarea-id" /></Ink.Field>
Do
Use both `htmlFor` and `id`
<Field isStacked htmlFor="fieldid"><NewInput id="newinputid" /></Field>
<Field isStacked htmlFor="matchingid"><NewInput id="matchingid" /></Field>
Don't
Use not matching `htmlFor` and `id`
Do
Use matching `htmlFor` and `id`
<Field isStacked htmlFor="fieldid"><NewInput id="newinputid" /></Field>
Don't
Use not matching `htmlFor` and `id`
<Field isStacked htmlFor="matchingid"><NewInput id="matchingid" /></Field>
Do
Use matching `htmlFor` and `id`
This rule won't trigger
If you're using inputs that can have multiple instances inside of Field (Checkbox, NewCheckbox, Radio, NewRadio), this rule won't be triggered.
<Field isStacked><NewCheckbox id="newcheckbox-01" /><NewCheckbox id="newcheckbox-02" /></Field>
<Ink.Field isStacked><Ink.NewRadio /><Ink.NewRadio /></Ink.Field>
Do
This rule won't trigger for inputs that are multiple
<Field isStacked><NewCheckbox id="newcheckbox-01" /><NewCheckbox id="newcheckbox-02" /></Field>
<Ink.Field isStacked><Ink.NewRadio /><Ink.NewRadio /></Ink.Field>
Do
This rule won't trigger for inputs that are multiple
How this rule works
To investigate how this rule works, check out this gist on AST Explorer.
Is this page helpful?