Visually Hidden

Used to hide content visually but keep it accessible to screen readers.

Source: packages/chakra-ui-solid/src/components/visually-hiddenChakra UI ↗

import { Box, VisuallyHidden } from "chakra-ui-solid";

const Dot = () => (
  <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
    <circle cx="12" cy="12" r="6" fill="currentColor" />
  </svg>
);

export default function VisuallyHiddenBasic() {
  return (
    <Box
      as="button"
      display="inline-flex"
      alignItems="center"
      gap="2"
      px="4"
      py="2"
      borderWidth="1px"
      borderColor="border"
      borderRadius="l2"
      fontWeight="medium"
    >
      <Dot /> 3 <VisuallyHidden>Notifications</VisuallyHidden>
    </Box>
  );
}

Usage

import { VisuallyHidden } from "chakra-ui-solid";

<VisuallyHidden>Hidden content</VisuallyHidden>

Examples

Input

Using the render prop, you can render the VisuallyHidden styles onto an element of your own.

The input is hidden

import type { JSX } from "@solidjs/web";
import { HStack, VisuallyHidden } from "chakra-ui-solid";

export default function VisuallyHiddenWithInput() {
  return (
    <HStack>
      The input is hidden
      <VisuallyHidden
        render={(props) => (
          <input
            {...(props as JSX.InputHTMLAttributes<HTMLInputElement>)}
            type="text"
            placeholder="Search..."
            aria-label="Search"
          />
        )}
      />
    </HStack>
  );
}

render is this library’s answer to asChild, and it is a function that receives the computed props rather than a child element — for the same reason Stack’s separator is a component. See Box for the whole of it.