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

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>

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>

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>

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.

Severity

Components affected by this rule

Examples

This rule won't trigger

How this rule works

Is this page helpful?

no-placeholders

Disallows the usage of placeholders in inputs

Severity(Copy link)

Components affected by this rule(Copy link)

Examples(Copy link)

This rule won't trigger(Copy link)

How this rule works(Copy link)

Table of Contents

Severity

Components affected by this rule

Examples

This rule won't trigger

How this rule works