> For the complete documentation index, see [llms.txt](https://interopxyz.gitbook.io/ui-plus/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://interopxyz.gitbook.io/ui-plus/components/display/legend.md).

# Legend

## Description

Display a legend of color and value pairs

{% tabs %}
{% tab title="Preview" %}
![](/files/PPZ21LEK6xRiIxJ7jXBy)
{% endtab %}

{% tab title="Location" %}
**Name** | Ui Legend

**Nickname** | Legend

**Tab** | Ui

**Panel** | Display

**Division** | 4
{% endtab %}

{% tab title="Inputs" %}
**\*E** | **Element** (*Ui+ Element*) | An optional input for an Element.&#x20;

> If an Element is input it will be updated, if empty a new Element will be created.
>
> The input control must be of the same type as the component

**V** | **Label** (*Text*) | The controls legend values

**C** | **Colors** (*Colour*) | The controls legend colors

**H** | **Horizontal** (*Bool*) | Is legend orientation horizontal

**I** | **Icon** (*Integer*) | The legend icon
{% endtab %}

{% tab title="Ouputs" %}
**E** | **Element** (*Ui+ Element*) | Ui Element Control.&#x20;
{% endtab %}

{% tab title="Mode" %}
*none*
{% endtab %}
{% endtabs %}

## Usage

![Box](/files/k95shHYYx4P2v7MRkebR)

![Dot](/files/SoWXiB8WZGjFcne1e32Y)

![Bar](/files/EYyJLm4nPA1VQfdPkJVA)

![Fill](/files/SZjWfJWUZVRX6gGpUSLO)

![Underline](/files/iMRytRlEL9jKO14SQaw2)
