# Input Groups

<figure><img src="https://3046942752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHfd391cB6wDC8S3yHcie%2Fuploads%2FCEARQtKrcamOWkUUgBw7%2Fimage.png?alt=media&#x26;token=aca42ed8-ae57-4fed-bade-e58026aa2084" 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.