builtin-component-arguments.md

builtin-component-arguments

✅ The extends: 'recommended' property in a configuration file enables this rule.

The builtin Input component has several arguments that match attributes of the lower-case input HTML element. These arguments should be set via e.g. @type, instead of type, but it is easy to forget and can cause subtle issues.

This rule warns about Input component invocations that use the following attributes instead of arguments:

• checked
• type
• value

The builtin Textarea component has several arguments that match properties of the lower-case textarea HTML element. These arguments should be set via e.g. @value, instead of value, but it is easy to forget and can cause subtle issues.

This rule warns about Textarea component invocations that use the following attributes instead of arguments:

• value

Please note that this rule currently only warns about these three attributes on the Input, and one property on the Textarea components, but might be extended in the future to also warn about other attributes or builtin components.

Examples

This rule forbids the following:

<Input type="text" size="10" />

<Input @type="checkbox" checked />

<Textarea value="Hello, Tom!" /></Textarea>

This rule allows the following:

<input type="text" size="10" />

<Input @type="text" size="10" />

<Input @type="checkbox" @checked={{true}} />

<Textarea @value="Hello, Tom!" /></Textarea>

Migration

• Add the @ character in front of the relevant attributes to convert them into component argument

Related Rules

• no-unknown-arguments-for-builtin-components

References

• Input component API documentation
• Textarea component API documentation