> ## 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.

# VisuallyHidden

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

`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

```tsx theme={null}
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](/ui/accessibility) for labeling and announcement patterns.

## Props

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

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>">
  Element or render function composed with the hidden span props and ref.
</ParamField>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.