---
title: List of page elements
url: https://www.tines.com/docs/pages/list-of-page-elements/
updated: 2026-06-05T13:09:26+00:00
---

*[tines.com](https://www.tines.com/llms.txt) › [Docs](https://www.tines.com/llms.txt) › [Pages](https://www.tines.com/llm/docs/pages.md)*

# List of page elements

*[View on tines.com](https://www.tines.com/docs/pages/list-of-page-elements/)*

Pages support a range of elements, including input fields and display elements.

### Input fields

- **Short text** – a single line of text, e.g. "first name"
- **Long text **– multiline text, e.g. "address" or "comments"
- **Email** – an email address (with format validation)
- **Web URL** – a web address (with format validation)
- **Option** – one or more options selected from a predefined list
- **Date or time** – a date and/or time input with a user-friendly date picker
- **Boolean** – a yes/no response
- **Number** – a quantity
- **File upload** – a file attached from the user's computer (maximum of 55 MB for each page submission across all upload fields)
- **Password** – collect sensitive input from users, starring out as they type, with the option to encrypt input before storing. To avoid sensitive data appearing directly in event data, you can provide a formula expression that transforms the `password_value` the user enters, before it’s included in event data.
  
  - For anything consequential, we recommend encrypting the value – ideally using an asymmetric approach like `RSA_ENCRYPT` or `RSA_AES_HYBRID_ENCRYPT`. 
  - The expression should be wrapped in the `BASE64_ENCODE` function if the payload contains binary characters. `BASE64_DECODE` can be used later to decode the payload again. For example:

```
BASE64_ENCODE(RSA_ENCRYPT(password_value, CREDENTIAL.rsa_private_key))
```

### Display elements

- **Heading** – large text for titles
- **Rich text** – formatted body text. This supports formatting using the [Markdown markup language](https://www.markdownguide.org/basic-syntax/). We support the [CommonMark](https://commonmark.org/) specification.
- **Divider** – a horizontal rule to separate page sections
- **Button** – whenever you collect input on a page, you’ll need a button to allow the user to press submit and advance to the next page
  
  - Additionally you can give it a submission value to pass that custom value to the event, otherwise the label of the button will be send.

![](https://www.datocms-assets.com/55802/1724688279-screenshot-2024-08-26-at-17-04-24.png)

```
"body": {
  "button" : "custom value" // Submission value checked
},
```

```
"body": {
  "button" : "Submit" // Submission value unchecked
},
```

- **Image** – render an image by providing a direct upload (max 1024KiB), a URL, or a formula reference that contains an object with [Base64 encoded](https://www.tines.com/docs/formulas/functions/base64-encode/) contents, type, and name keys. This matches the object produced by the file upload element.
- **Map** - render a location on a map by providing a path to a an array of map marker objects. Each object should have a latitude and longitude, and can have an optional label also. Our [ARRAY](https://www.tines.com/docs/formulas/functions/array/) and [OBJECT](https://www.tines.com/docs/formulas/functions/object/) formulae may be helpful. As an example, 

```
ARRAY(OBJECT("latitude", 53.3857, "longitude", -6.2404, "label", "Ireland"))
```

will produce the following:

```json
[
  {
    "latitude": 53.3857,
    "longitude": -6.2404,
    "label": "Ireland",
  },
]
```

![](https://www.datocms-assets.com/55802/1743002916-screenshot-2025-03-26-at-15-26-55.png)

*Source: [Geo-lookup IP addresses in bulk (Tines Library)](https://www.tines.com/library/stories/1144115/?name=geo-lookup-ip-addresses-in-bulk)*

- **File** - share a file either via direct upload or dynamically using a formula reference. The latter must must evaluate to an object with contents ([Base64 encoded](https://www.tines.com/docs/formulas/functions/base64-encode/)), name, and type (the file’s content type) keys. This matches the object produced by the file upload element.
- **Table** - to render data from the events within a table by providing a path to a CSV parsed with [CSV_PARSE](https://www.tines.com/docs/formulas/functions/csv-parse/) or [CSV_PARSE_TO_OBJECTS](https://www.tines.com/docs/formulas/functions/csv-parse-to-objects/). The latter will render headings.
  
  - You can enable the `Allow row selection` option to make table rows selectable. Any selected rows will be submitted with the page data.
- **Chart** - to visualize data from events in a line, bar, or pie chart. 
  
  - Line and bar chart - provide a path to an array of objects containing graph points. Each object should have a name for the x-axis label, an amount for the x coordinate, and a value for the y coordinate. Example:

```
ARRAY(
  OBJECT("name", "Jan", "amt", "1","value", 10),
  OBJECT("name", "Feb", "amt", "4", "value", 20),
  OBJECT("name", "Mar", "amt", "8", "value", 15),
  OBJECT("name", "Apr", "amt", "10", "value", 30),
  OBJECT("name", "May", "amt", "21", "value", 25)
)
```

- Pie chart - Provide a path to an array of objects containing pie chart slices. Each object should have a name labelling the pie chart slice and a value indicating how much space it should take up. Example:

```
ARRAY(
  OBJECT("name", "Marketing", "value", 35),
  OBJECT("name", "Sales", "value", 28),
  OBJECT("name", "Engineering", "value", 42),
  OBJECT("name", "Operations", "value", 18),
  OBJECT("name", "Support", "value", 22)
)
```