# Inputbox component

Input Box component will support different types of input. User can set input types like text, password, number, email type based on requirements.

{% hint style="success" %}
*Check out the given demonstration on the Input box functionality for better understanding of the component.*
{% endhint %}

<figure><img src="/files/SgZacL8OxYFwy70Um77E" alt=""><figcaption><p>Using the Inputbox component inside the Designer module</p></figcaption></figure>

## Default Component Image

![](/files/hBhj7xnxI8ymRDeokLzz)

## Properties of the Input box Component

### **General property**

\
User can change the height, width, top, left. If initial visibility is unchecked, then the chart won’t be visible at the first preview. User can manage the Text editable & default text message and also different type of input.

!\[Graphical user interface, application, email

Description automatically generated]\(/files/g1fxMG5ZCY3O5qqRaAb7)\ <br>

* **Input Type -** User can set input types like text, password, number, email and type of input type based on the requirements.

&#x20;     ![](/files/OzM2DIeCfeYG0yOWPzLu)

### **Background**

* **Shadow –** Enable shadow.
* **Shadow Colour –** Set the shadow colo&#x72;**.**
* **Shadow Transparency –** Set the opacity.

![](/files/yJ8ClqsiR8wfYdgZ4ZNR)

### **Style**

\
User can set the background color and font color as well as font styling properties in this section. Background Opacity for the component can be also det using this property.

* **Background Color –** Set the spacing between the button&#x73;**.**
* **Background Opacity –** Set the opacit&#x79;**.**
* **Border –** Enable border.
* **Border Radius –** Set border radius.
* **Border Thickness –** Set border thicknes&#x73;**.**
* **Border colour –** Set border color.
* **Font Style –** Select the font style.
* **Font Weight –** Select the font weight.
* **Font Family -** Select the font family.
* **Font Colour –** Set the font color.

!\[Graphical user interface

Description automatically generated]\(/files/QsB3k4xmRkhzkP1lUooZ)

## **Output**

![](/files/NrDUIiLHSnAbh5PrkHUM)


---

# 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://docs.bdb.ai/governed-dashboards-4/charts-gallery/other-charts/inputbox-component.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.