# Hidden
> Utility component to responsively hide or show content.

## Import

```js
import { Hidden } from '@volue/wave-react';
```

## Examples

### Basic

`Hidden` provides a way to hide or show content/components according to the passed value.

> **Tip**
>
> `Hidden` hides content both visually and for assistive technology/screen reader users.
> For hiding content but keeping it available to screen readers, use [Visually Hidden component](https://next.wave-design-system.pages.dev/components/utility/visually-hidden.md).

```jsx
<Flex flow="column">
  <Hidden hide>{'Hidden'}</Hidden>
  <Hidden hide={false}>{'Shown'}</Hidden>
</Flex>
```

### Responsive

`Hidden` supports responsive syntax for `hide` property, which means you can control the visibility based on the size of the viewport.

```jsx
<Hidden hide={{ '@initial': true, '@mqLargeAndUp': false }}>
  {'Visible on large screens and above'}
</Hidden>
```

---

## API reference

| Name      | Type                                                      | Default   | Description                                                                                                                                                                                                                                                                                                                              | Required |
| --------- | --------------------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `as`      | `keyof JSX.IntrinsicElements \| React.ComponentType<any>` | `div`     | Change the component to a different HTML tag or custom component. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.   For more details, read our [Composition](https://next.wave-design-system.pages.dev/get-started/composition.md#polymorphism) guide. |          |
| `css`     | `StitchesCss`                                             |           | Apply styles directly to a component in a similar way how you would define inline styles. Wave uses [Stitches](https://stitches.dev/) under the hood with a fully-typed API and support for features like tokens, media queries, or variants.                                                                                            |          |
| `hide`    | `boolean`                                                 | `true`    | When `true` the children are going to be hidden. Supports responsive syntax.                                                                                                                                                                                                                                                             |          |
| `display` | `"block" \| "inline" \| "flex" \| "contents"`             | `"block"` | Controls the display style value when `hide` is not active.                                                                                                                                                                                                                                                                              |          |