# Input

## Overview

Input controls are independent entry fields that are usually used to support other features on the layout. Input controls can be customized by selecting the control in the main designer canvas and clicking on the gear icon to access its properties.

{% hint style="info" %}
For instance, an input control can be used as a filter for a list element.
{% endhint %}

![Accessing Input Control Properties](/files/-MHbWRSohgkBt0uxqFIU)

Supported input controls:

* [Annotation List](/building-an-application/views/design-ui/layout-controls/input.md#annotation-list)
* [Filter Input](/building-an-application/views/design-ui/layout-controls/input.md#filter-input)

## Annotation List

Annotation lists are used in [Object Pages](/building-an-application/views/design-ui/page-types.md#object-page) consisting of document instances. The Annotation List control attempts to load all bookmarks and an outline of the current document loading in the layout.

## Filter Input

Filter inputs are mainly used in the context of lists to provide a means for filtering the list.

![Sample Filter Input](/files/-MHbWrOrQH9zgPnTTuWu)

### Appearance

Appearance properties allows you to further customize the design of your control.

#### Margin CSS

Defines the margin around your control, offsetting it from the edges of its parent element.

{% hint style="info" %}
The margin value is set using CSS notation.
{% endhint %}

#### Padding CSS

Defines a padding inside your control, offsetting your control content from its edges.

{% hint style="info" %}
The padding value is set using CSS notation.
{% endhint %}

#### Placeholder

Defines a text that is displayed in a muted style by default when the control is not being used.

{% hint style="info" %}
Supports multiple languages
{% endhint %}

### If Placed In Page Header

The properties provided in this section allows you to customize the design of your input control when it is used in a page header.

#### Align Right

Enabling this option ensures your input control and its content are aligned to the right.

{% hint style="info" %}
By default, the control and its content are aligned to the left.
{% endhint %}

#### Display As Action

Enabling this option causes your filter input control to be rendered as an action link.

### Help

Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.

#### Help Html

Allows you to write Html code that is rendered as help text for your element.

{% hint style="info" %}
Supports multiple languages.
{% endhint %}

#### Position

Allows you to define where the help text should be displayed relative to your application window.

*Supported positions:*\
*Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right*

#### Step Order Index (Number)

Allows you to define the order within the intro tour.

{% hint style="info" %}
The tab-index refers to the order in which elements are focused on using the **Tab** key on your keyboard. This is an essential feature to enhance the accessibility and usability of your application by any user.
{% endhint %}

## Tag filter

Tag filter is used in the list context to provide to the end user a means for filtering the tags.

<figure><img src="/files/lCCuTAGoSG5ws71KLZ4d" alt=""><figcaption><p>Adding Tag Filter in the List Context</p></figcaption></figure>

Tag Filter has one configuration option which sets it's visual appearance in the final layout visible to the end users.

<figure><img src="/files/kFXEHDYUwAqlnBrXAzqD" alt=""><figcaption><p>Tag Filter configuration</p></figcaption></figure>

If *Display as an action* is kept with the default value *false,* the end user will see a button ![](/files/C26yYLd6VayKpxTBPrFg) and the list of already chosen Tags for results filtering.

In the case *Display as an action* is set to true, the Filter Tag button&#x20;

* is shown in gray color ![](/files/MnSfFeewUZIKQxYfPYaQ)if no Tag Filter has been applied by the end user or
* is shown with the glowing effect  ![](/files/HdNdvQziZjqtd4jzfJYO) if tags have been chosen by the end user for list filtering.&#x20;

{% hint style="info" %}
In this last variant of the tag filter, the selected tags are not displayed. This can be useful in situations where there is not enough space to show all selected tags, or for aesthetic reasons. This variant of the tag filter allows you to filter the list or board without cluttering the interface with the selected tags.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tivity.one/building-an-application/views/design-ui/layout-controls/input.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.