# info

## Overview

Displays text in an app in a paragraph form. The text can be displayed in a single line, or optionally with a label.

### Basic Example

The simplest way to use an `info` component is to specify the text to display between the `<info>` tags.

{% code title="main.view\.xml" %}

```xml
<info>This is the simplest way to use an info component.</info>
```

{% endcode %}

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-91c2dc59c13ff812a5a4ec6bf36aba6db90428c5%2Finfo-example.png?alt=media)

## Standard Attributes

### `label`

{% content-ref url="../xml-fields/label" %}
[label](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label)
{% endcontent-ref %}

### `value`

**Optional**

**Type**: `string`

**Default**: unset

Specify the text to display inside the `info` component. This is an alternative to specifying the text directly inside the `<info>...</info>` tags.

#### Example: Without `value`

```xml
<info>Info text</info>
```

#### Example: With `value`

```xml
<info value="Info text"/>
```

## Advanced Attributes

### `align-text`

**Optional**

**Type**: `center` | `left` | `right`

**Default**: `left`

Specify if the text content of the `info` component.

#### Example: `info` right-aligned text

```xml
<info label="Condition: Faulty" align-text="right">
    The condition of the part has been assessed and it was found to be faulty.
</info>
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-b0f997909a2607f63674fb12ea4a40144e436231%2Finfo-align-text.png?alt=media)

### `align-label`

**Optional**

**Type**: `center` | `left` | `right`

**Default**: `left`

Specify how the [`label`](#label) should be aligned.

### `bind`

{% content-ref url="../xml-fields/bind" %}
[bind](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/bind)
{% endcontent-ref %}

### `id`

{% content-ref url="../xml-fields/id" %}
[id](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/id)
{% endcontent-ref %}

### `label-case`

{% hint style="info" %}
**Version compatibility**

`label-case` was introduced in version **4.86.5** of the JourneyApps Runtime.
{% endhint %}

{% content-ref url="../xml-fields/label-case" %}
[label-case](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label-case)
{% endcontent-ref %}

### `label-color`

{% content-ref url="../xml-fields/label-color" %}
[label-color](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label-color)
{% endcontent-ref %}

### `show-if` and `hide-if`

{% content-ref url="../xml-fields/show-if" %}
[show-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/show-if)
{% endcontent-ref %}

{% content-ref url="../xml-fields/hide-if" %}
[hide-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/hide-if)
{% endcontent-ref %}

### `text-color`

**Optional**

**Type**: `string` - can be a named color or #HEX value

**Default**: Primary font color

Specify the text color of the info's text.

## Component Methods

The following component methods are available when an [`id`](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/id) is assigned to the component and `component.info({id:'my-id'})` is called from JS/TS:

### `scrollIntoView`

Programmatically scroll until the `info` component is visible in the view.