diff --git a/README.md b/README.md index 299aaf45c0..5ed4a34f10 100644 --- a/README.md +++ b/README.md @@ -180,6 +180,7 @@ rules in templates can be disabled with eslint directives with mustache or html | :------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------- | :- | :- | :- | | [no-attrs-in-components](docs/rules/no-attrs-in-components.md) | disallow usage of `this.attrs` in components | ✅ | | | | [no-attrs-snapshot](docs/rules/no-attrs-snapshot.md) | disallow use of attrs snapshot in the `didReceiveAttrs` and `didUpdateAttrs` component hooks | ✅ | | | +| [no-builtin-form-components](docs/rules/no-builtin-form-components.md) | disallow usage of built-in form components | ✅ | | | | [no-classic-components](docs/rules/no-classic-components.md) | enforce using Glimmer components | ✅ | | | | [no-component-lifecycle-hooks](docs/rules/no-component-lifecycle-hooks.md) | disallow usage of "classic" ember component lifecycle hooks. Render modifiers or custom functional modifiers should be used instead. | ✅ | | | | [no-on-calls-in-components](docs/rules/no-on-calls-in-components.md) | disallow usage of `on` to call lifecycle hooks in components | ✅ | | | diff --git a/docs/rules/no-builtin-form-components.md b/docs/rules/no-builtin-form-components.md new file mode 100644 index 0000000000..4e241e9fbb --- /dev/null +++ b/docs/rules/no-builtin-form-components.md @@ -0,0 +1,95 @@ +# ember/no-builtin-form-components + +💼 This rule is enabled in the ✅ `recommended` [config](https://github.com/ember-cli/eslint-plugin-ember#-configurations). + + + +This rule disallows the use of Ember's built-in form components (`Input` and `Textarea`) from `@ember/component` and encourages using native HTML elements instead. + +## Rule Details + +Ember's built-in form components (`Input` and `Textarea`) were designed to bridge the gap between classic HTML form elements and Ember's component system. However, as Ember has evolved, using native HTML elements with modifiers has become the preferred approach for several reasons: + +- Native HTML elements have better accessibility support +- They provide a more consistent developer experience with standard web development +- They have better performance characteristics +- They avoid the extra abstraction layer that the built-in components provide + +This rule helps identify where these built-in form components are being used so they can be replaced with native HTML elements. + +## Examples + +Examples of **incorrect** code for this rule: + +```js +import { Input } from '@ember/component'; +``` + +```js +import { Textarea } from '@ember/component'; +``` + +```js +import { Input as EmberInput, Textarea as EmberTextarea } from '@ember/component'; +``` + +Examples of **correct** code for this rule: + +```hbs + + + + +