---
description: Компонент для отображения статичной информации в виде пар "заголовок-значение".
tags: list
---

<Overview group="data-display">

# InfoRow [tag:component]

Компонент для отображения статичной информации в виде пар "заголовок-значение".
Рекомендуется использовать внутри [`SimpleCell`](/components/simple-cell) и других ячеечных компонентов.

Связанные компоненты:

- [`SimpleCell`](/components/simple-cell)

</Overview>

{/* @example-description: Базовая строка `InfoRow` с заголовком и значением. */}
<Playground>
  ```jsx
  <InfoRow header="Общий бюджет">3000 р.</InfoRow>
  ```
</Playground>

## Группы элементов

Рекомендуется оборачивать связанные InfoRow в [`Group`](/components/group) с заголовком:

{/* @example-description: Группа `InfoRow` внутри `Group` для отображения профиля пользователя. */}
<Playground>
  ```jsx
  <Group header={<Header mode="secondary">Профиль</Header>}>
    <SimpleCell>
      <InfoRow header="Должность">Frontend-разработчик</InfoRow>
    </SimpleCell>
    <SimpleCell>
      <InfoRow header="Стаж">5 лет</InfoRow>
    </SimpleCell>
  </Group>
  ```
</Playground>

## Многострочный контент

{/* @example-description: Многострочное описание в `InfoRow` внутри `SimpleCell multiline`. */}
<Playground style={{ maxWidth: 270 }}>
  ```jsx
  <SimpleCell multiline>
    <InfoRow header="Описание">
      Разработка интерфейсов для экосистемы VK с использованием React и TypeScript
    </InfoRow>
  </SimpleCell>
  ```
</Playground>

## Когда использовать

- Отображение статических данных.
- Карточки профилей.
- Детализация записей.
- Списки характеристик.

```jsx
// ❌ Неправильно (интерактивный элемент)
<InfoRow header="Настройки">
  <Switch checked={value} />
</InfoRow>

// ✅ Правильно (только статичный контент)
<InfoRow header="Статус">
  <Text>Активен</Text>
</InfoRow>
```

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `**header** \*` | `ReactNode` | `-` | Элемент, отображаемый над содержимым. |