v33.8.1

select option
Getting started
Components
How to contribute to ink
Support and feedback

Tools

Playroom
Figma library
Figma Cheatsheet
Preview
Usage

Deprecation

Start here
Deprecation list and dates
Codemods 101

Design Guides

Icons
Colors
Design Tokens
Guides
Internationalization
Accessibility
Component patterns
UX Writing

Component Categories

Accessory
Form
Formatter
Hooks
Illustration
Layout
Navigation
Spreadsheet
Table
Typography
Preferences
Github
Version 33.8.1
Guides

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.

Table of Contents

Severity

    Components affected by this rule

      Examples

        This rule won't trigger

          How this rule works

            Is this page helpful?