---
name: "[hidden]"
area: "API"
kind: "HTML attribute"
parent: "up.element module"
visibility: "experimental"
url: "https://unpoly.com/api/hidden"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.element module](https://unpoly.com/api/up.element.md)</nav>

# [hidden]

**This feature is experimental**. Please [share](https://github.com/unpoly/unpoly/discussions) your experiences so we know what to keep or change.

Elements with this attribute are hidden from the page.

When Unpoly hides an element for any reason, it will set an `[hidden]` attribute instead of using an inline style like `display: none`. This allows users to customize the hiding implementation using CSS.

<nav aria-label="Guides">

- [Learn: Switching form state](https://unpoly.com/learn/switching-form-state.md)

</nav>

## Customizing the CSS {#customizing-the-css}

While `[hidden]` is a [standard HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), its default implementation is [not very useful](https://meowni.ca/hidden.is.a.lie.html). In particular, it cannot hide elements with any `display` rule. Unpoly improves the default CSS styles of `[hidden]` so it can hide arbitrary elements.

Unpoly's default styles for `[hidden]` look like this:

```css
[hidden][hidden] {
  display: none !important;
}
```

You can override the CSS to hide an element in a different way, e.g. by giving it a zero height:

```css
.my-element[hidden] {
  display: block !important;
  height: 0 !important;
}
```

> #### Important
>
> Any overriding selector must have a [specificity of `(0, 2, 0)`](https://polypane.app/css-specificity-calculator/#selector=.element%5Bhidden%5D). Also, all rules should be defined with [`!important`](https://www.w3schools.com/css/css_important.asp) to override other styles defined on that element.