# Adding UI

## Adding UI <a href="#adding-ui.md" id="adding-ui.md"></a>

Now that you know the basics, let’s extend our script by allowing the user to toggle the text. We can do this by adding a control to the menu.

### Creating a control <a href="#creating-a-control" id="creating-a-control"></a>

Let’s start by creating a simple checkbox:

```lua
local cb = gui.Checkbox('my_checkbox');
```

Each control has a unique ID, which the UI framework uses to distinguish controls within containers. It’s very important that your control’s ID doesn’t conflict with others, as that could result in a broken state or worse.

To create the ID, call `gui.ControlID` and pass the desired ID, or just pass a simple string instead.

Then, create the checkbox by calling `gui.Checkbox` and passing the ID you've chosen.

### Constructing the row <a href="#constructing-the-row" id="constructing-the-row"></a>

By default, controls are typically placed in rows - layouts that stack elements in a specific manner. We provide a simple helper function - `gui.MakeControl`.

```lua
local row = gui.MakeControl('My checkbox', cb);
```

You may also create both the control and the checkbox, or any other menu element, at the same time using `gui.MakeControlEasy` !

```lua
local cb, row = gui.MakeControlEasy('my_checkbox', 'My checkbox', 'checkbox')
```

### Adding the row to a group <a href="#adding-the-row-to-a-group" id="adding-the-row-to-a-group"></a>

With the control and row ready, let’s add them to a group.

{% hint style="info" %}
To view group and control IDs, you can enable Debug mode in the SCRIPTS tab.
{% endhint %}

In this example, we'll use the `lua>elements a` group. First, locate that group in the global context:

```lua
local group = gui.ctx:Find('lua>elements a');
```

Then call its `Add` method to include your row:

```lua
group:Add(row);
```

That's it!

{% hint style="info" %}
It is very important to call `Reset()` method if you add multiple controls, so the layout will stack everything correctly.
{% endhint %}

### Using the value <a href="#using-the-value" id="using-the-value"></a>

Next, let’s modify our previous script so the text only appears if the checkbox is checked. Wrap your drawing code in an `if` statement before rendering the text:

```lua
if cb:GetValue():Get() then
```

and close it after.

The final script should look something like this:

```lua
local cb, row = gui.MakeControlEasy('my_checkbox', 'Checkbox', 'checkbox');
local group = gui.ctx:Find('lua>elements a');
group:Add(row);

local function onPresentQueue()
    if cb:GetValue():Get() then
        local d = draw.surface;
        d.font = draw.fonts['gui_main'];
        d:AddText(draw.Vec2(50, 50),
            'Hello drawing! My first script speaking.',
            draw.color.White()
        );
    end
end

events.presentQueue:Add(onPresentQueue);
```

And here's the result:

<div align="left"><figure><img src="/files/lzdlprHzia7oHaOPpvzh" alt=""><figcaption></figcaption></figure></div>


---

# 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://lua2.fatality.win/introduction/creating-scripts/adding-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.