no-builtin-form-components.md

ember/no-builtin-form-components

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:

import { Input } from '@ember/component';

import { Textarea } from '@ember/component';

import { Input as EmberInput, Textarea as EmberTextarea } from '@ember/component';

Examples of correct code for this rule:

<!-- Instead of using the Input component -->
<input value={{this.value}} {{on 'input' this.updateValue}} />

<!-- Instead of using the Textarea component -->
<textarea value={{this.value}} {{on 'input' this.updateValue}} />

Migration

Input Component

Replace:

<Input
  @value={{this.value}}
  @type='text'
  @placeholder='Enter text'
  {{on 'input' this.handleInput}}
/>

With:

<input value={{this.value}} type='text' placeholder='Enter text' {{on 'input' this.handleInput}} />

Textarea Component

Replace:

<Textarea @value={{this.value}} @placeholder='Enter text' {{on 'input' this.handleInput}} />

With:

<textarea value={{this.value}} placeholder='Enter text' {{on 'input' this.handleInput}} />

References

• Ember Input Component API
• Ember Textarea Component API
• Ember Octane Modifier RFC