ESLint plugin

The essential plugin for use with the Atlassian Design System.

no-html-text-input

Don't use native HTML text inputs. The Atlassian Design System provides a ready-made textfield component that includes event tracking, ensures accessible implementations, and provides access to ADS styling features like design tokens.

Use the Atlassian Design System Textfield, (opens new window) component when suitable.

Examples

This rule marks code as violations when it finds native HTML text input elements.

Incorrect

<label for="full-name">Full Name</label>
<input name="full-name" id="full-name" />

<label for="nickname">Nickname</label>
<input name="nickname" id="nickname" type="text" />

Correct

import Textfield from '@atlaskit/range';

<label for="full-name">Full Name</label>
<Textfield name="full-name" id="full-name" />

<label for="nickname">Nickname</label>
<Textfield name="nickname" id="nickname" />

Was this page helpful?

We use this feedback to improve our documentation.