ESLint plugin

The essential plugin for use with the Atlassian Design System.

use-correct-field

The correct field component should be used with certain components.

Examples

Incorrect

import { Field } from '@atlaskit/form';
import Checkbox from '@atlaskit/checkbox';
import Range from '@atlaskit/range';
import Toggle from '@atlaskit/toggle';

<Field>
    {({ fieldProps }) => <Checkbox {...fieldProps} />}
</Field>
<Field>
    {({ fieldProps }) => <Range {...fieldProps} />}
</Field>
<Field>
    {({ fieldProps }) => <Toggle {...fieldProps} />}
</Field>
 ^^^^^^^^

Correct

import { CheckboxField, RangeField } from '@atlaskit/form';
import Checkbox from '@atlaskit/checkbox';
import Range from '@atlaskit/range';
import Toggle from '@atlaskit/toggle';

<CheckboxField>{({ fieldProps }) => <Checkbox {...fieldProps} />}</CheckboxField>;
<RangeField>{({ fieldProps }) => <Range {...fieldProps} />}</RangeField>;
<CheckboxField>{({ fieldProps }) => <Toggle {...fieldProps} />}</CheckboxField>;

Was this page helpful?

We use this feedback to improve our documentation.