v33.3.1
Tools
no-placeholders
Disallows the usage of placeholders in inputs
This rule suggests avoiding the use of placeholder in inputs except when inside a table cell.
Using placeholders in inputs can cause accessibility issues and a bad user experience. An empty input tells the user that they still need to add information, while placeholders may cause confusion.
Severity
Recommended severity: warning
rules: {'@carta/ink-rules/no-placeholders': 1,}
Components affected by this rule
All ink inputs.
Examples
<Ink.Field><Ink.NewInput placeholder="email" /></Ink.Field>
<Field isStacked><NewInput placeholder="First name" /></Field>
<label><NewTextArea placeholder="Type your inquiry here" /></label>
<Field isStacked label="Some Label"><NewInput /></Field>
<Ink.Field label="Some Label"><Ink.NewTextArea /></Ink.Field>
<label>Some Label<NewTextArea /></label>
Don't
Use placeholders inside inputs
Do
Use inputs without placeholders and add a label to the Field/label
<Ink.Field><Ink.NewInput placeholder="email" /></Ink.Field>
<Field isStacked><NewInput placeholder="First name" /></Field>
<label><NewTextArea placeholder="Type your inquiry here" /></label>
Don't
Use placeholders inside inputs
<Field isStacked label="Some Label"><NewInput /></Field>
<Ink.Field label="Some Label"><Ink.NewTextArea /></Ink.Field>
<label>Some Label<NewTextArea /></label>
Do
Use inputs without placeholders and add a label to the Field/label
This rule won't trigger
For any inputs inside tables. This works for ink table components, html table tags and any table tags from other libraries with the same names of ink's.
<NewTable.Cell><NewInput placeholder="Amount of equity vested" /></NewTable.Cell>
<TableCell><NewDatePicker placeholder="MM/DD/YYYY" /></TableCell>
<td><NewInput placeholder="Amount of equity vested" /></td>
Do
Use can still use inputs inside of tables. This rule won't trigger for placeholders used inside tables.
<NewTable.Cell><NewInput placeholder="Amount of equity vested" /></NewTable.Cell>
<TableCell><NewDatePicker placeholder="MM/DD/YYYY" /></TableCell>
<td><NewInput placeholder="Amount of equity vested" /></td>
Do
Use can still use inputs inside of tables. This rule won't trigger for placeholders used inside tables.
How this rule works
To investigate how this rule works, check out this gist on AST Explorer.
Is this page helpful?