# Input Groups

<figure><img src="/files/jnL0eSxDsFxr85v3hJc6" alt=""><figcaption></figcaption></figure>

Organize grouped input fields in structured containers.\
Supports expandable sections, number inputs with increment/decrement handlers, and custom action buttons.

***

## Structure

```lua
center = {
    type = "input_groups",
    id = "test_inputs",
    title = "Input Groups Test",
    layout = {
        columns = 1,
        scroll_x = "none",
        scroll_y = "auto"
    },
    groups = {
        {
            header = "Some Group",
            expandable = false,
            inputs = {
                {
                    id = "option_1",
                    type = "number",
                    label = "Some Option",
                    category = "group_1",
                    on_increment = function(data)
                        print("Incremented")
                    end,
                    on_decrement = function(data)
                        print("Decremented")
                    end
                }
            }
        }
    },
    buttons = {
        {
            id = "confirm_options",
            label = "Confirm",
            action = "confirm_options",
            class = "primary",
            dataset = {
                target_id = "test_inputs",
                source = "input_groups_test"
            }
        },
        {
            id = "reset_options",
            label = "Reset",
            action = "reset_options",
            class = "secondary",
            dataset = {
                target_id = "test_inputs",
                source = "input_groups_test"
            }
        }
    }
}
```

***

## Group Options

| Key          | Description                          |
| ------------ | ------------------------------------ |
| `header`     | Title displayed above the group.     |
| `expandable` | Allows the group to collapse/expand. |
| `inputs`     | Array of fields in the group.        |

***

## Input Options

| Key            | Description                                                                 |
| -------------- | --------------------------------------------------------------------------- |
| `id`           | Unique input identifier.                                                    |
| `type`         | `"number"` or `"text"`.                                                     |
| `label`        | Label shown next to the input.                                              |
| `category`     | (Optional) Logical grouping for identification.                             |
| `default`      | (Text only) Initial value shown in the input.                               |
| `placeholder`  | (Text only) Shown when the field is empty.                                  |
| `on_increment` | (Number only) Function triggered when + button is pressed. Receives `data`. |
| `on_decrement` | (Number only) Function triggered when – button is pressed. Receives `data`. |

> Number inputs automatically include + and – buttons for value adjustment. These fire your attached callbacks with context-aware `data` from `dataset`.

***

## Button Options

| Key            | Description                                                           |
| -------------- | --------------------------------------------------------------------- |
| `id`           | Unique button name.                                                   |
| `label`        | Text shown on the button.                                             |
| `action`       | Action to trigger — e.g., `"close_builder"` or your own NUI callback. |
| `on_action`    | (Optional) Function to run instead of action.                         |
| `class`        | (Optional) Button style: `"primary"`, `"danger"`, etc.                |
| `should_close` | (Optional) Whether to close the UI on press. Default: `false`.        |
| `dataset`      | (Optional) Custom data passed to the action or function.              |

***

## Layout Options

| Key        | Description                                          |
| ---------- | ---------------------------------------------------- |
| `columns`  | Number of input columns (e.g., 2 = side by side).    |
| `scroll_x` | `"none"`, `"auto"`, or `"on"` for horizontal scroll. |
| `scroll_y` | `"none"`, `"auto"`, or `"on"` for vertical scroll.   |

***

## Notes

* `on_increment` and `on_decrement` are the preferred way to handle number field changes.
* Group sections can be collapsed by setting `expandable = true`.
* Use `dataset` to pass `target_id`, `source`, or custom flags with buttons.
* Button logic and dataset handling are identical to the Buttons component for consistency.
* Use `action = "close_builder"` if you want to safely exit the UI.


---

# 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.boii.dev/fivem-free-resources/bduk/components/input-groups.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.