> ## 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` отрисовывает визуально скрытый `span`. Его содержимое остаётся в дереве доступности и может предоставлять доступное имя. Он принимает нативные props `span`, ref `span` и композицию Base UI `render`. Импортируйте `VisuallyHiddenProps` из той же точки входа.

**Light**

[Пример визуально скрытого элемента (light)](https://storybook.twenty.com/iframe.html?id=ui-accessibility-visuallyhidden--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Пример визуально скрытого элемента (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)

## Использование

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

Используйте видимую метку, если позволяет пространство. Для элементов управления, которые уже принимают `aria-label`, этот атрибут является ещё одним способом задать доступное имя.

## Скрытое содержимое

Разместите пояснительный текст внутри обёртки. Не размещайте внутри неё фокусируемые элементы управления: обёртка остаётся визуально скрытой, когда её дочерние элементы получают фокус. Она не добавляет live region, не удаляет содержимое из вспомогательных технологий и не скрывает конфиденциальные данные.

Используйте `id`, чтобы связать скрытые описания с `aria-describedby`. Нативные атрибуты, `className`, `style` и `ref` применяются к скрытому элементу span или элементу, заданному через `render`. См. [специальные возможности](https://docs.twenty.com/ru/ui/accessibility.md), чтобы узнать о шаблонах маркировки и объявлений.

## Свойства

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