> For the complete documentation index, see [llms.txt](https://postica.gitbook.io/binding-system-3/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://postica.gitbook.io/binding-system-3/reference/integrations/unity-ui.md).

# TextMeshPro and Unity UI

uGUI, TextMeshPro and the conversions they need.

UI is where most bindings end up, so the package ships the conversions and the drawer overrides those types need.

{% hint style="success" %}
**Learn by doing:** [A Health Bar with No Driver Class](/binding-system-3/tutorials/health-bar.md) binds Image.fillAmount end to end.
{% endhint %}

{% hint style="info" %}
None of the components on this page are yours to edit, so every binding here is a [proxy binding](/binding-system-3/overview/proxy-bindings.md): right click the field, **Enable Binding**, then click the hexagon toggle beside the label. The default [update point](/binding-system-3/overview/modes-and-updates.md) is **UPDATE**, which is right for almost all UI; switch it to **LATE UPDATE** if the value has to follow animation or layout. See [Two Ways to Bind](/binding-system-3/overview/two-ways-to-bind.md).
{% endhint %}

## TextMeshPro

TextMeshPro exposes its text as a `char[]` as well as a `string`, which makes binding a number to a label awkward without help. Two converters handle it:

<table><thead><tr><th width="290">Converter</th><th>When to use it</th></tr></thead><tbody><tr><td><strong>Char Array to String</strong></td><td>Reading TMP text as a string.</td></tr><tr><td><strong>String to Char Array</strong></td><td>Writing to it.</td></tr></tbody></table>

The usual chain for a live number in a label:

```
Score.value  (int)  →  Format String "{0:N0}"  →  TMP_Text.text  (string)
```

Both are chosen for you when you bind an `int` to `text`. All you set is the format.

{% hint style="success" %}
For a label that needs several values, use the **Text Template** modifier instead of concatenating bindings. One binding, one template, placeholders for the input value and for other bindable variables.
{% endhint %}

## Unity UI (uGUI)

<table><thead><tr><th width="290">Type</th><th>What to do</th></tr></thead><tbody><tr><td><code>Image.fillAmount</code></td><td>The classic progress bar. Bind a value, add <strong>Normalize Value</strong> or <strong>Remap Range</strong>.</td></tr><tr><td><code>Slider.value</code></td><td>Bind it <code>ReadWrite</code> and you have a two-way control, with no code written anywhere.</td></tr><tr><td><code>Toggle.isOn</code></td><td>Same, with <strong>Invert Boolean</strong> when the polarity is backwards.</td></tr><tr><td><code>Text.text</code></td><td>Any <code>IFormattable</code> plus <strong>Format String</strong>.</td></tr><tr><td><code>ColorBlock</code></td><td>Selectable colour blocks get their own drawer, so each state's colour is individually bindable.</td></tr><tr><td><code>UnityEvent</code> slots</td><td>Bindable through <a href="/binding-system-3/overview/proxy-bindings.md">proxy bindings</a>, and the <strong>Unity Event</strong> converter lets an event participate as a binding target.</td></tr></tbody></table>

The float field also has an override, so a bound `float` in a UI component draws consistently with the rest.

## UI Toolkit

A separate story, with its own page: [UI Toolkit and UXML](/binding-system-3/overview/ui-toolkit.md). In short, a property of any `VisualElement` in a UXML document can be bound from UI Builder, stored either on the scene or in the asset.

## Common recipes

{% tabs %}
{% tab title="Health bar" %}

```
Health.current  →  Normalize Value [0 .. Health.max]  →  Image.fillAmount
```

Bind the **max** parameter of the modifier to `Health.max`, and the bar follows a changing maximum too.

Add **Value Smoother** for the bar to catch up smoothly instead of snapping.
{% endtab %}

{% tab title="Score counter" %}

```
Score.value  →  Tween Animation (Linear, 0.4s)  →  Format String "{0:N0}"  →  TMP_Text.text
```

The tween is pre-conversion, on the number. The format is post-conversion, on the string.
{% endtab %}

{% tab title="Settings slider" %}

```
Slider.value  ⇄  ReadWrite  ⇄  AudioMixer volume
```

Bind the slider's value in `ReadWrite` mode with a **Remap Range** from 0..1 to the mixer's decibel range. The slider reflects the current value on load and writes it on change, both directions through the same binding.
{% endtab %}

{% tab title="Enable on condition" %}

```
Ammo.count  →  Numeric Value Conditions (> 0)  →  Button.interactable
```

The condition modifier reports whether the rule holds to other bindings, and passes the number along untouched, so the same binding can still drive a label.
{% endtab %}
{% endtabs %}

## Related pages

* [Converters](/binding-system-3/pipeline/converters.md): the full list.
* [Modifier Catalogue](/binding-system-3/pipeline/modifier-catalogue.md): what to put in the chain.
* [Proxy Bindings](/binding-system-3/overview/proxy-bindings.md): for the UI components whose fields are not yours.
* [UI Toolkit and UXML](/binding-system-3/overview/ui-toolkit.md).