# react/jsx-indent-props

> Enforce consistent indentation of JSX props

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.