---
title: "invalid-ref-input"
description: "Reports a style.ref() label or ref method argument that is not a literal."
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-ref-input

This rule reports a `style.ref()` label or a ref method argument that is not a
literal. The compiler reads these values at build time, so a value from a variable
cannot name a ref or configure a method.

## Reported

```tsx
declare const label: string;
const card = style.ref(label);
style(card);
```

> invalid-ref-input: style.ref() accepts only an optional literal label
> 
> Example:2:24

## Fixed

```tsx
const card = style.ref("card");
style(card);
```

## How to fix

- Write the label as a string literal.
- If you need a different ref for each case, declare one ref for each case and
  choose between the refs at runtime. Each `style.ref()` call already creates a
  separate name, so the label does not need to differ.
- Write method arguments, such as the type of `asContainer()`, as literals.

See [style.ref()](/docs/macros/ref).

## 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-ref-input/index.mdx