> For the complete documentation index, see [llms.txt](https://lua2.fatality.win/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lua2.fatality.win/introduction/creating-scripts/adding-ui.md).

# 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="https://2267301601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGXl3mJ7rIlEGl0zYZZu0%2Fuploads%2Ft2rS80HPY7FE8eAAdZwF%2Fex1.png?alt=media&amp;token=7b24e2df-0fd3-4685-8f99-a73765239491" alt=""><figcaption></figcaption></figure></div>


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://lua2.fatality.win/introduction/creating-scripts/adding-ui.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.