VisuallyHidden

VisuallyHidden is a common technique used in web accessibility to hide content from the visual client, but keep it readable for screen readers.

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

Import#

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

Usage#

function Example() {
  return (
    <Button>
      <VisuallyHidden>Checkmark</VisuallyHidden>
      <CheckIcon />
    </Button>
  )
}

function Example() {
  return (
    <Button>
      <VisuallyHidden>Checkmark</VisuallyHidden>
      <CheckIcon />
    </Button>
  )
}

Editable Example

Another Example

Title and description

This will be hidden

function Example() {
  return (
    <Box>
      <Heading>Title and description</Heading>
      <VisuallyHidden>This will be hidden</VisuallyHidden>
    </Box>
  )
}

function Example() {
  return (
    <Box>
      <Heading>Title and description</Heading>
      <VisuallyHidden>This will be hidden</VisuallyHidden>
    </Box>
  )
}

Editable Example

Accessibility#

VisuallyHidden has all the styles necessary to hide it from visual clients, but keep it for screen readers.

Props#

This component doesn't have any custom props.

Name	Type	Description
`children`	`React.ReactNode`	The content to be hidden visually

Edit this page