ESLint plugin

The essential plugin for use with the Atlassian Design System.

no-placeholder

Placeholders are inherently inaccessible and should not be used. Instead, information about the type or formatting of a value should be included in a helper message that is associated to the input. This can be done natively in Atlaskit forms using the form's field and messaging components, like this example, (opens new window) in our form's documentation.

An exception to this rule is that placeholder text can be used in search fields if it’s accompanied by an icon and accessible label. This ensures that people using assistive technologies understand what type of field it is.

Examples

This rule will find violations for when a placeholder is used on an input element.

Incorrect

<input id="name" name="username" type="text" placeholder="FooBarBaz" />
                                             ^^^^^^^^^^^ `placeholder` prop should not be used

import Textfield from '@atlaskit/textfield';

<Textfield placeholder="FooBarBaz">
           ^^^^^^^^^^^ `placeholder` prop should not be used

import Form, { Field, FormFooter } from '@atlaskit/form';
import Textarea from '@atlaskit/textarea';

export default function Example(): React.JSX.Element {
  return (
    <Form onSubmit={(formState: unknown) => console.log('form submitted', formState)}>
      <Field label="Comments" name="comments">
        {({ fieldProps }) => (
          <Textfield
            placeholder="Include any thoughts you have about the above blog post."
            ^^^^^^^^^^^ `placeholder` prop should not be used
            {...fieldProps}
          />
        )}
      </Field>
      <FormFooter>
        <Button type="submit" appearance="primary">
          Submit
        </Button>
      </FormFooter>
    </Form>
  );
}

import Form, { Field, FormFooter } from '@atlaskit/form';
import Textarea from '@atlaskit/textarea';

export default function Example(): React.JSX.Element {
  return (
    <Form onSubmit={(formState: unknown) => console.log('form submitted', formState)}>
      <Field
        label="Comments"
        name="comments"
        component={({ fieldProps }) => (
          <Textfield
            placeholder="Include any thoughts you have about the above blog post."
            ^^^^^^^^^^^ `placeholder` prop should not be used
            {...fieldProps}
          />
        )}
      />
      <FormFooter>
        <Button type="submit" appearance="primary">
          Submit
        </Button>
      </FormFooter>
    </Form>
  );
}

Correct

<input id="name" name="username" type="text" aria-describedby="name__helper" />
<p id="name__helper">Usernames should be over 8 characters and include upper- and lower-case characters. For example, "FooBarBaz"</p>

import Textfield from '@atlaskit/textfield';

<Textfield id="name" name="username" aria-describedby="name__helper" />
<p id="name__helper">Usernames should be over 8 characters and include upper- and lower-case characters. For example, "FooBarBaz"</p>

import Form, { Field, FormFooter, HelperMessage, MessageWrapper } from '@atlaskit/form';
import Textarea from '@atlaskit/textarea';

export default function Example(): React.JSX.Element {
  return (
    <Form onSubmit={(formState: unknown) => console.log('form submitted', formState)}>
      <Field label="Comments" name="comments">
        {({ fieldProps }) => (
          <Fragment>
            <Textfield {...fieldProps} />
            <MessageWrapper>
              <HelperMessage>Include any thoughts you have about the above blog post.</HelperMessage>
            </MessageWrapper>
          </Fragment>
        )}
      </Field>
      <FormFooter>
        <Button type="submit" appearance="primary">
          Submit
        </Button>
      </FormFooter>
    </Form>
  );
}

import Form, { Field, FormFooter } from '@atlaskit/form';
import Textarea from '@atlaskit/textarea';

export default function Example(): React.JSX.Element {
  return (
    <Form onSubmit={(formState: unknown) => console.log('form submitted', formState)}>
      <Field
        label="Comments"
        name="comments"
        component={({ fieldProps }) => (
          <Textfield {...fieldProps} />
        )}
        helperMessage="Include any thoughts you have about the above blog post."
      />
      <FormFooter>
        <Button type="submit" appearance="primary">
          Submit
        </Button>
      </FormFooter>
    </Form>
  );
}

Was this page helpful?

We use this feedback to improve our documentation.