Basics

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

Explanation

Requires boolean data-* attributes to coalesce with nil (or false) so the attribute is omitted from the DOM when falsy, not rendered as data-disabled="".

Given <div data-disabled={@disabled}>, when @disabled is false Phoenix still emits the attribute as an empty string — data-disabled="". Tailwind's boolean data-attribute variant (data-disabled:...) matches on presence, so the empty form triggers the variant unintentionally. Writing {@disabled || nil} lets Phoenix skip the attribute entirely when falsy.

The check scans HEEx templates for attributes whose name is in the configured boolean list (disabled, open, selected, …) and whose value is a bare expression (just @assign or a variable, with no || / && / string literal / nil). Add new names via :names in .credo.exs.

Detection is line-by-line: a data-*={...} body split across multiple source lines is not inspected (the Elixir formatter keeps these on one line in practice).

Bad

<div data-disabled={@disabled}>...</div>
<div data-open={open?}>...</div>

Good

<div data-disabled={@disabled || nil}>...</div>
<div data-open={open? && "true"}>...</div>

Check-Specific Parameters

Use the following parameters to configure this check:

:names

List of boolean data-attribute name suffixes to scan.

This parameter defaults to ["active", "busy", "checked", "collapsed", "disabled", "enabled", "expanded", "focus", "hidden", "hover", "invalid", "loading", "open", "pressed", "readonly", "required", "selected", "valid", "visible"].

General Parameters

Like with all checks, general params can be applied.

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