# Visually Hidden

```tsx
import { Button, VisuallyHidden } from "@chakra-ui/react"
import { LuBell } from "react-icons/lu"

export const VisuallyHiddenBasic = () => {
  return (
    <Button>
      <LuBell /> 3 <VisuallyHidden>Notifications</VisuallyHidden>
    </Button>
  )
}

```

## Usage

```jsx
import { VisuallyHidden } from "@chakra-ui/react"
```

```jsx
<VisuallyHidden>Hidden content</VisuallyHidden>
```

## Examples

### Input

Using the `asChild` prop, you can pass a child element to the `VisuallyHidden`
component.

```tsx
import { HStack, VisuallyHidden } from "@chakra-ui/react"

export const VisuallyHiddenWithInput = () => {
  return (
    <HStack>
      The input is hidden
      <VisuallyHidden asChild>
        <input type="text" placeholder="Search..." />
      </VisuallyHidden>
    </HStack>
  )
}

```