ESLint plugin

The essential plugin for use with the Atlassian Design System.

no-placeholder

Move input instructions out of placeholder into persistent helper text. Keep the input's visible label and existing aria-describedby associations. Search fields can use a placeholder when they also have an icon and an accessible label; see the rule options before changing a search experience.

Incorrect

<input name="username" placeholder="At least eight characters" />

Correct

For a native input, give the helper an id and reference it alongside any existing description ids:

<>
    <label htmlFor="username">Username</label>
    <input id="username" name="username" aria-describedby="username-help" />
    <p id="username-help">Use at least eight characters.</p>
</>

For Field's component API, use helperMessage and preserve the supplied fieldProps:

import { Field } from '@atlaskit/form';
import Textfield from '@atlaskit/textfield';

<Field
    name="username"
    label="Username"
    component={({ fieldProps }) => <Textfield {...fieldProps} />}
    helperMessage="Use at least eight characters."
/>;

For the render-prop API, keep HelperMessage within its Field context so its generated helper id matches the input's supplied description ids. Keep MessageWrapper around the messages:

import { Field, HelperMessage, MessageWrapper } from '@atlaskit/form';
import Textfield from '@atlaskit/textfield';

<Field name="username" label="Username">
    {({ fieldProps }) => (
        <>
            <Textfield {...fieldProps} />
            <MessageWrapper>
                <HelperMessage>Use at least eight characters.</HelperMessage>
            </MessageWrapper>
        </>
    )}
</Field>;

Was this page helpful?

We use this feedback to improve our documentation.