Skip to main content

Visually Hidden

Visually Hidden is used when an element needs to be available to assistive technology, but otherwise hidden. The visually hidden component hides text visually from screen, but keeps it available to assistive technologies, such as screen readers. The component shouldn't be used to hide interactive content.

installversionusage
yarn add @ciceksepeti/cui-visually-hidden1.0.0import {VisuallyHidden} from '@ciceksepeti/cui-visually-hidden'

Content​

Visually hides its content from UI without removing it from DOM. Assistive technologies can still attract with the element but it will not take any space at the DOM. VisuallyHidden is a polymorphic component. That's why can be rendered as any valid HTML tag.

Example​

Example of a default behavior of VisuallyHidden component. Renders as 'div' by default.

import React, { useState } from 'react';
import VisuallyHidden from '@ciceksepeti/cui-visually-hidden';

export function CUIVisuallyHiddenDefault() {
const [disable, setDisable] = useState(false);
return (
<VisuallyHidden disabled={disable}>
Should not be seen! <hr />
</VisuallyHidden>
Disabled State : {disable.toString()} <br />
<button onClick={() => setDisable(!disable)}>Toggle Disable</button>
);
}

PREVIEW
Visually Hidden Default
Should not be seen!
Disabled State : false

Props​

Name

Type

Default

Required

Description

disabled

boolean

false

-

Enables disabling behavior of visually hidden component.

children

React.ReactNode

required

The content you want to be visually hidden..

as

string

div

-

Changes html tag of visually hidden component which renders to DOM

Playground​

/img/codesandbox-icon
/img/stackblitz-icon