Castle UI exports 2 components for the VisuallyHidden.

• VisuallyHidden: Visually hidden span component used to hide elements on screen.
• VisuallyHiddenInput: Visually hidden input component used for designing custom input components using the html input as a proxy

Usage

Import

import { VisuallyHidden, VisuallyHiddenInput } from '@passfort/castle'
content_copy
Copy

Example

It is used to visually hide an element but to make it accessible for screen-readers. It renders html <span> as a proxy.

<Box>
      <VisuallyHidden>Checkmark</VisuallyHidden>
      <Icon icon="check" />
    </Box>
<Box>
      <VisuallyHidden>Checkmark</VisuallyHidden>
      <Icon icon="check" />
    </Box>
content_copy
Copy
live example

Visually hidden input

It renders html <input> as a proxy.

<Box>
    <VisuallyHiddenInput
      defaultChecked
      onChange={(event) => {
        console.log(event.target.checked)
      }}
    />
</Box>
<Box>
    <VisuallyHiddenInput
      defaultChecked
      onChange={(event) => {
        console.log(event.target.checked)
      }}
    />
</Box>
content_copy
Copy
live example

Accessibility

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