# 1. UI Components The UI Components can be used for designing apps. Each component has a unique name, the name is used for data binding (the reference to the object in scripting).

There are a few built-in component objects. \ 1\. Container components: **container, tab view, split view.** 2\. Input components: **button, input field, checkbox, selection dropdown, text area.** 3\. Basic components: **chart, data table, label.**\ \ The UI Components may have event triggers that can be linked to an adapter.
## 1. Attributes ### **name** The `name` attribute is used for data binding - the reference to the object at runtime. We can get/set the object label, value, or trigger events using the name\ \ For example a component with the name my\_input: my\_input.label, my\_input.value, my\_input.click() ### label The `label` attribute is used for displaying the label of the component. ## 2. Frame and Auto Layout ### **Frame** The frame represents the location and size of the object on the app canvas. The frame includes origin and size. The origin contains the x-axis and the y-axis which tell the location of the object. The size contains width and height which are the width and height of the object. ### **Auto Layout** Auto layout is how the object responds when the container size change. There are anchors and sizings.\ \ The anchors can be one or all of the values: top, left, bottom, or right. The sizing can be one or all of the values: width, and height. You can config and see how it works using the inspector.

## 3. Events Each object has its own events, we can set up the event to link with an adapter. {% hint style="success" %} You must create a [JavaScript Runner adapter](https://docs.dataflow.so/2.-adapters) to handle events. {% endhint %}