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

# Visualmente oculto

> Mantén el texto de apoyo disponible para la tecnología de asistencia sin mostrarlo visualmente.

## Resumen

`VisuallyHidden` representa un `span` oculto visualmente. Su contenido permanece en el árbol de accesibilidad y puede proporcionar un nombre accesible. Acepta props nativas de span, una ref de span y composición de Base UI con `render`. Importe `VisuallyHiddenProps` desde el mismo punto de entrada.

**Light**

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

**Dark**

[Ejemplo visualmente oculto (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)

## "Uso"

```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 una etiqueta visible cuando el espacio lo permita. Para los controles que ya aceptan `aria-label`, ese atributo es otra forma de proporcionar un nombre accesible.

## Contenido oculto

Coloque texto complementario dentro del contenedor. Evite colocar controles que puedan recibir el foco dentro de él: el contenedor permanece visualmente oculto cuando sus elementos secundarios reciben el foco. No añade una región activa, no elimina contenido de la tecnología de asistencia ni oculta datos confidenciales.

Use `id` para asociar descripciones ocultas con `aria-describedby`. Los atributos nativos, `className`, `style` y `ref` se aplican al span oculto o al elemento proporcionado mediante `render`. Consulte [accesibilidad](https://docs.twenty.com/es/ui/accessibility.md) para ver patrones de etiquetado y anuncio.

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