---
title: "react/jsx-indent-props"
description: "Enforce consistent indentation of JSX props"
# Generated by src/codegen/lint-rule-docs.ts. Do not edit below this line.
plugin: "react"
aliases: []
kind: null
category: null
default: "off"
fixable: "yes"
typeAware: false
deprecated: false
---

When props are on their own lines, uneven indentation makes them hard to tell apart from the tag and its children. The rule checks each prop that starts a line. The default is 4 spaces more than the line where the tag starts.

`--fix` corrects the indentation.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"react/jsx-indent-props" = "error" # or "warn"
```

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"react/jsx-indent-props" = ["error", {
  indentMode = 4, # "tab", "first" or number
  ignoreTernaryOperator = false,
}]
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"count": 2} */}
```jsx
const field = (
    <Input
      name="email"
            value={email}
    />
);
```

Not reported:

{/* good */}
```jsx
const field = (
    <Input
        name="email"
        value={email}
    />
);
```

## Options

The option is a number of spaces, `"tab"`, `"first"`, or an object:

| Option | Default | What it does |
| --- | --- | --- |
| `indentMode` | `4` | A number of spaces, `"tab"` for one tab, or `"first"` to line up every prop with the first one. |
| `ignoreTernaryOperator` | `false` | By default, props of a tag on a line that starts with `?` or `:` get one more level. With `true` they don't. |

```toml bunfig.toml
[lint.rules]
"react/jsx-indent-props" = ["error", 2]
```

{/* good {"options": [2]} */}
```jsx
const field = (
  <Input
    name="email"
    value={email}
  />
);
```

With `"first"`:

{/* bad {"options": ["first"]} */}
```jsx
const field = <Input name="email"
  value={email}
/>;
```

{/* good {"options": ["first"]} */}
```jsx
const field = <Input name="email"
                     value={email}
/>;
```

With `2`, the props of a tag on a line that starts with `?` or `:` are indented by 4:

{/* good {"options": [2]} */}
```jsx
const field = editable
  ? <Input
      name="email"
    />
  : null;
```

{/* bad {"options": [2]} */}
```jsx
const field = editable
  ? <Input
    name="email"
  />
  : null;
```

With `ignoreTernaryOperator`, they're indented by 2 like any other props:

{/* good {"options": [{"indentMode": 2, "ignoreTernaryOperator": true}]} */}
```jsx
const field = editable
  ? <Input
    name="email"
  />
  : null;
```

## When not to use it

If `bun fmt` or another formatter lays out your code, it already decides the indentation.