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

> Mantieni il testo di supporto disponibile per la tecnologia assistiva senza visualizzarlo.

## Panoramica

`VisuallyHidden` esegue il rendering di uno `span` visivamente nascosto. Il suo contenuto rimane nell'albero di accessibilità e può fornire un nome accessibile. Accetta le props native di span, un ref di span e la composizione `render` di Base UI. Importa `VisuallyHiddenProps` dallo stesso punto di ingresso.

**Light**

[Esempio visivamente nascosto (light)](https://storybook.twenty.com/iframe.html?id=ui-accessibility-visuallyhidden--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Esempio visivamente nascosto (dark)](https://storybook.twenty.com/iframe.html?id=ui-accessibility-visuallyhidden--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-accessibility-visuallyhidden--display)

## Utilizzo

```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>
);
```

Usa un'etichetta visibile quando lo spazio lo consente. Per i controlli che accettano già `aria-label`, tale attributo è un altro modo per fornire un nome accessibile.

## Contenuto nascosto

Inserisci il testo di supporto all'interno del wrapper. Evita di inserire al suo interno controlli attivabili con lo stato attivo: il wrapper rimane visivamente nascosto quando i relativi elementi figlio ricevono lo stato attivo. Non aggiunge un'area live, non rimuove i contenuti dalla tecnologia assistiva e non nasconde dati riservati.

Usa `id` per associare descrizioni nascoste a `aria-describedby`. Gli attributi nativi, `className`, `style` e `ref` si applicano allo span nascosto o all'elemento fornito tramite `render`. Consulta [accessibilità](https://docs.twenty.com/it/ui/accessibility.md) per i modelli di etichettatura e annuncio.

## Props

**children** `ReactNode`

Content hidden visually while remaining available to assistive technology.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

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


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