# 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: 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://dev.ubidots.com/dashboards-and-widgets/custom-ui.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.