---
title: "invalid-cva-input"
description: "Reports && or a ternary inside a style.cva() value."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# invalid-cva-input

This rule reports a runtime condition, such as `&&` or a ternary, inside the base
or an option value of `style.cva()`. The compiler generates every value when it
creates the factory, so the condition cannot choose a style.

## Reported

```tsx
declare const active: boolean;
style.cva(active && "bg-blue-500");
```

> invalid-cva-input: style.cva() values require static utilities, arrays, CSS variants, or custom properties. Utility inputs cannot use && or ternary expressions
> 
> Example:2:11

## Fixed

```tsx
declare const active: boolean;
const button = style.cva("", {
  variants: { active: { true: "bg-blue-500", false: null } },
});
button({ active });
```

## How to fix

- Turn the condition into an option, and pass the current value when you call the
  factory, as in the example.
- Stored `style()` results, refs, animations, and `class` fields are not accepted
  either. Use them in `style()` instead.

See [style.cva()](/docs/macros/cva#style-values).

## Rule settings

| Preset | Severity |
| --- | --- |
| `recommended` | deny |
| `strict` | deny |
| `stylistic` | off |

[Configure lint](/docs/configuration#lint) to change the severity or options.

Source: https://stillwind.dev/docs/lints/invalid-cva-input/index.mdx