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

# Ascuns vizual

> Păstrați textul de asistență disponibil pentru tehnologia de asistență fără a-l afișa vizual.

## Prezentare generală

`VisuallyHidden` redă un `span` ascuns vizual. Conținutul său rămâne în arborele de accesibilitate și poate furniza un nume accesibil. Acceptă proprietăți span native, o referință span și compunerea Base UI `render`. Importați `VisuallyHiddenProps` din același punct de intrare.

**Light**

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

**Dark**

[Exemplu ascuns vizual (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)

## Utilizare

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

Folosiți o etichetă vizibilă atunci când spațiul permite acest lucru. Pentru controalele care acceptă deja `aria-label`, acel atribut reprezintă o altă modalitate de a furniza un nume accesibil.

## Conținut ascuns

Plasați textul de ajutor în interiorul containerului. Evitați plasarea controalelor care pot primi focalizarea în interiorul acestuia: containerul rămâne ascuns vizual atunci când elementele sale copil primesc focalizarea. Nu adaugă o regiune live, nu elimină conținutul din tehnologiile de asistență și nu ascunde date confidențiale.

Folosiți `id` pentru a asocia descrieri ascunse cu `aria-describedby`. Atributele native, `className`, `style` și `ref` vizează elementul span ascuns sau elementul furnizat prin `render`. Consultați [accesibilitatea](https://docs.twenty.com/ro/ui/accessibility.md) pentru tipare de etichetare și anunțare.

## Proprietăți

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