Rbtz.CredoChecks.Design.RawHtmlElementsInHeex (rbtz_credo_checks v0.1.0)

Copy Markdown View Source

Basics

This check is disabled by default.

Learn how to enable it via .credo.exs.

This check has a base priority of normal and works with any version of Elixir.

Explanation

Forbids raw <button>, <input>, <select>, <textarea>, and <a> elements in HEEx templates.

Projects typically provide typed, accessible, design-system-consistent component equivalents (<.button>, <.input>, <.select>, <.textarea>, <.link>). Reaching for the raw HTML tag bypasses styling tokens, keyboard handling, and the focus-ring conventions that those components bake in.

The check inspects every ~H sigil and every .heex template referenced via embed_templates. It does NOT flag <.button> etc. — only the bare-tag forms.

Bad

<button type="submit">Save</button>
<input name="email" />
<a href="/">Home</a>

Good

<.button type="submit">Save</.button>
<.input field={@form[:email]} />
<.link navigate={~p"/"}>Home</.link>

Check-Specific Parameters

There are no specific parameters for this check.

General Parameters

Like with all checks, general params can be applied.

Parameters can be configured via the .credo.exs config file.