VisuallyHidden

VisuallyHidden renders a visually hidden span. Its content stays in the accessibility tree and can supply an accessible name. It accepts native span props, a span ref, and Base UI render composition. Import VisuallyHiddenProps from the same entry point.

Usage

import { Button } from 'twenty-ui/primitives/input';
import { VisuallyHidden } from 'twenty-ui/primitives/accessibility';
import { IconPlus } from 'twenty-ui/icon';

type AddRecordActionProps = { onAdd: () => void };

export const AddRecordAction = ({ onAdd }: AddRecordActionProps) => (
  <Button onClick={onAdd}>
    <IconPlus aria-hidden />
    <VisuallyHidden>Add record</VisuallyHidden>
  </Button>
);

Use a visible label when space permits. For controls that already accept aria-label, that attribute is another way to supply an accessible name.

Hidden content

Place supporting text inside the wrapper. Avoid placing focusable controls inside it: the wrapper stays visually hidden when its children receive focus. It does not add a live region, remove content from assistive technology, or hide confidential data. Use id to associate hidden descriptions with aria-describedby. Native attributes, className, style, and ref target the hidden span or the element supplied through render. See accessibility for labeling and announcement patterns.

Props

ReactNode

Content hidden visually while remaining available to assistive technology.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>

Element or render function composed with the hidden span props and ref.

Overview

Apps

API

Self-Host

Contribute

UI Library

Usage

Hidden content

Props

​Usage

​Hidden content

​Props

Usage

Hidden content

Props