booleanValues

Prefer shorthand boolean attributes over explicit {true} values in JSX.

✅ This rule is included in the jsx stylistic presets.

When a boolean JSX attribute is set to true, the value can be omitted entirely. The shorthand syntax is more concise and idiomatic in JSX, reducing visual noise and improving readability.

Examples

❌ Incorrect

<button disabled={true}>Click me</button>

<input type="text" required={true} />

<Component isActive={true} />;

✅ Correct

<button disabled>Click me</button>

<input type="text" required />

<Component isActive />;

<button disabled={false}>Explicit false is fine</button>

<Component isActive={someCondition} />;

Options

This rule is not configurable.

When Not To Use It

If your project has an established style guide that prefers explicit boolean values for consistency or clarity, you may want to disable this rule. However, the shorthand syntax is widely accepted as idiomatic JSX.

Further Reading

• React Documentation: JSX In Depth
• MDN: Boolean attributes

Equivalents in Other Linters

• Deno: jsx-boolean-value
• ESLint: react/jsx-boolean-value