> For the complete documentation index, see [llms.txt](https://dev.ubidots.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dev.ubidots.com/dashboards-and-widgets/custom-ui.md).

# Custom UI

Custom UI is a Ubidots widget that maps XML-like tags to form elements. Use it to create interactive forms with text fields, dropdown menus, and toggle buttons.

Here is a quick example of a simple UI created with the Custom UI widget:

<figure><img src="/files/EZShYikw74AAAmIQW6IZ" alt="" width="563"><figcaption></figcaption></figure>

**The following XML maps to the UI shown above:**

```xml
<form>

    <paragraph type="h1">Send data form</paragraph>

    <inputcombo
        type="text"
        id="variable_label"
        label="Variable label"
        description="Choose the variable to send data to"
        placeholder="Enter the name of the variable"
    />

    <inputcombo
        type="number"
        id="variable_value"
        label="Variable value"
        description="Set the value that you want to send"
        placeholder="Enter the value that you want to send"
        min="0" 
        max="100"
    />

    <inputcombo
        type="date"
        id="start_date"
        label="Date"
        description="Set the date on which the measurement was performed"
        placeholder="Set the date"
    />

    <inputcombo
        type="number.buttons"
        id="variable_value_button"
        label="Variable value using buttons"
        description="Set the value that you want to send using buttons"
        placeholder="Enter the value that you want to send"
        min="0"
        max="100"
    />
    
    <inputcombo
        type="toggle"
        id="enable_device"
        label="Enable device"
        description="Set the state of the device"
    />

    <inputcombo
        type="hour"
        id="start_hour"
        label="Start Time"
        description="Set the hour at which the measurement was performed"
    />
    
    <inputcombo
        type='dropdown.list'
        id='variable_from_list'
        label="Select a variable"
        description="Select a common variable from all devices"
        placeholder='Choose an option'
    >
       <menu>
		   <item id='temperature'>Temperature</item>
		   <item id='humidity'>Humidity</item>
		   <item id='iluminance'>Iluminance</item>
		   <item id='magnetic_flux'>Magnetic flux</item>
      </menu>
    </inputcombo>
    
    <inputcombo
        type='dropdown.checkbox'
        id='devices_from_list'
        label="Select multiple options"
        description="Select multiple devices to send data"
        placeholder='Choose multiple options'
    >
        <menu>
            <item id='dev_1'>device 1</item>
            <item id='dev_2'>device 2</item>
            <item id='dev_3'>device 3</item>
            <item id='dev_4'>device 4</item>
        </menu>
    </inputcombo>

    <button type="success" click="make_request">Send</button> 

</form>
```

## Available UI Components

There are three main components that can be used within the Custom UI widget:

* Paragraph
* Input combo
* Button

| Custom UI element | Description                                           | Properties                                                                                                                                                                                                                                                                                                  |
| ----------------- | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Input combo       | Displays an input field based on the `type` property. | <ul><li>type: the type of input field</li><li>id: a unique identifier used to access this field</li><li>label: the text label shown next to the input</li><li>description: a short description shown below the label to guide the user</li><li>placeholder: the text shown inside the input field</li></ul> |
| Paragraph         | Displays headings or paragraphs based on the `type`.  | <ul><li>type: paragraph type</li></ul>                                                                                                                                                                                                                                                                      |
| Button            | Displays a button whose color depends on the `type`.  | <ul><li>type: defines the button color</li><li>click: a user-defined label that serves as a unique ID to link the button to an action.</li></ul>                                                                                                                                                            |

The following screenshot shows each part of the UI displayed at the beginning of this section:

<figure><img src="/files/lyPSGHkKY5Ln03twSA4k" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://dev.ubidots.com/dashboards-and-widgets/custom-ui.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.