> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# VisibilityHidden

> Keep supporting text available to assistive technology without displaying it visually.

`VisibilityHidden` renders a visually hidden `span`. Its content stays in the accessibility tree and can supply an accessible name. It has no state and accepts only `children`.

## Usage

```tsx theme={null}
import { Button } from 'twenty-ui/primitives/input';
import { VisibilityHidden } 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 />
    <VisibilityHidden>Add record</VisibilityHidden>
  </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.

The component does not forward `id`, `className`, or other native attributes. See [accessibility](/ui/accessibility) for labeling and announcement patterns.

## Props

<ParamField body="children" type="ReactNode" required>
  Content hidden visually while remaining available to assistive technology.
</ParamField>