# Value Box

The **ValueBox** widget is a highly versatile component for displaying a single piece of data. It can intelligently render various data types, including text, numbers, booleans, and even complex objects or images encoded in Base64.

It's an essential building block for dashboards, detail views, and any interface where you need to display a specific value with customizable styling, such as font size, weight, color, and alignment.

This widget is perfect for debugging as well, as the connected value is shown without frills.

<div><figure><img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2Ft17nTmybmC0jzJE46Vn6%2FScreenshot%202024-09-24%20at%2010.32.06.png?alt=media&#x26;token=b9af9715-3c6f-43b5-b9e7-29145a31e2ba" alt="" width="239"><figcaption><p>A value box</p></figcaption></figure> <figure><img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2F0HdUwcWHqQJjkExoOpYf%2FScreenshot%202024-09-24%20at%2011.51.56.png?alt=media&#x26;token=8d241ef3-3a33-470f-83f5-d4a81e1564b4" alt="" width="216"><figcaption><p>A Value box displaying an object</p></figcaption></figure></div>

## Data Binding

Connect the widget to your application's logic by dragging the corresponding items from the Flow Builder.

### Input

| **Property**  | **Type** | **Description**                                                                           |
| ------------- | -------- | ----------------------------------------------------------------------------------------- |
| **`onClick`** | `Any`    | Fired when a user clicks on the widget. The payload is the current value being displayed. |

### Output

| **Property**    | **Type**  | **Description**                                                                                                      |
| --------------- | --------- | -------------------------------------------------------------------------------------------------------------------- |
| **`value`**     | `Any`     | The data to be displayed. The widget adapts its rendering based on the data type (e.g., text, object, Base64 image). |
| **`clear`**     | `Boolean` | When `true`, clears the currently displayed value.                                                                   |
| **`textColor`** | `String`  | Programmatically overrides the configured text color.                                                                |

## Configuration

### Settings

These properties control the appearance and styling of the text displayed within the widget.

| **Label**                | **Description**                                                             | **Type**       | **Property**     |
| ------------------------ | --------------------------------------------------------------------------- | -------------- | ---------------- |
| **Font Size**            | The size of the text in pixels.                                             | Integer        | `fontSize`       |
| **Font Weight**          | The weight (thickness) of the text, from `normal` to `bolder`.              | Integer        | `fontWeight`     |
| **Horizontal Alignment** | Aligns the text horizontally within the widget (`left`, `center`, `right`). | String         | `justifyContent` |
| **Vertical Alignment**   | Aligns the text vertically within the widget (`top`, `middle`, `bottom`).   | String         | `alignItems`     |
| **Text Color**           | The color of the displayed text.                                            | String (Color) | `color`          |
| **Suffix**               | Text to be appended to the displayed value.                                 | String         | `suffix`         |
| **Placeholder**          | Text to display when the widget has no value.                               | String         | `placeholder`    |