# hx-status
The `hx-status` attribute overrides swap behavior based on the HTTP response status code.
## Examples
```html
<!-- Show validation errors in a specific container -->
<form hx-post="..."
hx-status:422="target:#errors select:#validation-errors">
...
</form>
<!-- Suppress swap on server errors -->
<button hx-post="..." hx-status:5xx="swap:none">Save</button>
<!-- Push a custom URL on 201 Created -->
<form hx-post="..." hx-status:201="push:/items/new">...</form>
```
## Patterns
The status code goes after the colon: `hx-status:CODE="..."`.
Supports exact codes, single-digit wildcards (`x`), and range wildcards (`xx`):
```html
<div hx-get="..."
hx-status:404="select:#not-found"
hx-status:50x="select:#bad-gateway"
hx-status:5xx="swap:none">
...
</div>
```
Evaluated in order of specificity: exact match (`404`), then 2-digit wildcard (`50x`), then 1-digit wildcard (`5xx`).
## Modifiers
The value takes space-separated `key:value` pairs.
```html
<form hx-post="..."
hx-status:422="swap:innerHTML target:#errors select:#validation-errors"
hx-status:500="swap:none push:false">
...
</form>
```
### `swap`
Swap style for this status code. See [`hx-swap` styles](https://four.htmx.org/reference/attributes/hx-swap#styles) for values.
```html
<div hx-get="..." hx-status:500="swap:none"></div>
```
### `target`
CSS selector for the swap target. Overrides [`hx-target`](https://four.htmx.org/reference/attributes/hx-target).
```html
<div hx-get="..." hx-status:422="target:#error-container"></div>
```
### `select`
CSS selector to pick content from the response. Overrides [`hx-select`](https://four.htmx.org/reference/attributes/hx-select).
```html
<div hx-get="..." hx-status:422="select:#validation-errors"></div>
```
### `push`
Push a URL to browser history. `true`/`false`, or a URL string.
```html
<div hx-get="..." hx-status:5xx="push:false"></div>
<form hx-post="/items" hx-status:201="push:/items/new"></form>
```
### `replace`
Replace the current URL in browser history. `true`/`false`, or a URL string.
```html
<div hx-get="..." hx-status:301="replace:/new-location"></div>
```
### `transition`
Use the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) for this swap. `true`/`false`.
```html
<div hx-get="..." hx-status:200="transition:true"></div>
```
## Notes
* Values override response headers ([`HX-Retarget`](https://four.htmx.org/reference/headers/HX-Trigger), `HX-Reswap`, etc.)
* Without `hx-status`, htmx swaps all responses except [`204`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/204) and [`304`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/304)
## See Also
* [`hx-swap`](https://four.htmx.org/reference/attributes/hx-swap)
* [`hx-select`](https://four.htmx.org/reference/attributes/hx-select)
* [`hx-target`](https://four.htmx.org/reference/attributes/hx-target)
* [`htmx.config.noSwap`](https://four.htmx.org/reference/config/htmx-config-noSwap)
Handle responses differently by status code
The hx-status attribute overrides swap behavior based on the HTTP response status code.
<!-- Show validation errors in a specific container --><form hx-post="..." hx-status:422="target:#errors select:#validation-errors"> ...</form><!-- Suppress swap on server errors --><button hx-post="..." hx-status:5xx="swap:none">Save</button><!-- Push a custom URL on 201 Created --><form hx-post="..." hx-status:201="push:/items/new">...</form>