# Group

## <mark style="color:green;">class</mark> **Group**

A `Group` is a UI element that can only exist as a child of a [Card](https://docs.nighty.one/ui-scripting/api-reference/card). It is used to organize multiple [UI Elements](https://docs.nighty.one/ui-scripting/api-reference/ui-elements) into a single unit for easier alignment and positioning.

{% hint style="warning" %}
Do not create **Group** instances directly. Instead, use the `create_group()` method of the [Card](https://docs.nighty.one/ui-scripting/api-reference/card) class to genereate them.
{% endhint %}

{% hint style="info" %}
Nesting multiple Groups is allowed.
{% endhint %}

#### Constructor

```python
# Basic example
group = card.create_group(type="columns")

# Setting extra attributes
group = card.create_group(
    type="columns",
    horizontal_align="center",
    vertical_align="center",
    gap=2,
    full_width=True
)

# Type of rows
group = card.create_group(type="rows")

# Nesting groups
group1 = card.create_group(type="columns")
group2 = group1.create_group(type="rows")
```

| Parameter         | Description                                                     |                                                                                                                                                                                                                                                                           |                                                                                                                                                                  |
| ----------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| type              | <p>Allowed: <code>"columns"</code>                              | <code>"rows"</code><br>Default: <code>columns</code></p>                                                                                                                                                                                                                  |                                                                                                                                                                  |
| vertical\_align   | <p>Allowed: <code>"start"</code>                                | <code>"center"                                                                                                                                                                                                                                                            | "end"</code><br>Default: <code>"start"</code><br><br>Defines the alignment of the group's child elements (UI elements and Groups) along the vertical axis.</p>   |
| horizontal\_align | <p>Allowed: <code>"start"</code>                                | <code>"center"                                                                                                                                                                                                                                                            | "end"</code><br>Default: <code>"start"</code><br><br>Defines the alignment of the group's child elements (UI elements and Groups) along the horizontal axis.</p> |
| gap               | <p>See <a href="..#gap">Gap</a>.<br>Default: <code>6</code></p> |                                                                                                                                                                                                                                                                           |                                                                                                                                                                  |
| full\_width       | <p>Allowed: <code>True                                          | False</code><br>Default: <code>False</code><br><br>Forces the group to occupy the entire available width. Use this if the group appears smaller than expected. Note: It may require setting the parent elements (such as containers and cards) to full width as well.</p> |                                                                                                                                                                  |

#### Methods

| Method                                   | Description                                                                                              |
| ---------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| create\_group(type, \*\*kwargs)          | Creates a nested Group instance within the current Group.                                                |
| create\_ui\_element(element, \*\*kwargs) | Creates a [UI Element](https://docs.nighty.one/ui-scripting/api-reference/ui-elements) within the Group. |

### Examples

Improved version of the last example from the previous section (Card). Here, Group is used to place the button next to the input.

<figure><img src="https://3836407116-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaFce5BqRsGvQObqcfG7q%2Fuploads%2FsoHBArW214LX1H77YD0w%2Fex9.png?alt=media&#x26;token=bd7d2ba6-1371-45e0-b6d1-9e876d89a69f" alt=""><figcaption></figcaption></figure>

```python
tab = Tab(name='My Custom Tab')

container = tab.create_container(type="columns")

card = container.create_card(gap=2, vertical_align="center", horizontal_align="center")
card.create_ui_element(UI.Text, content="Input email", size="base")

group = card.create_group(type="columns", gap=2, vertical_align="center")

email_input = group.create_ui_element(UI.Input, label="Email")
submit_button = group.create_ui_element(UI.Button, label="Submit", variant="cta")

def on_submit():
    print(f"{email_input.value} submitted")

submit_button.onClick = on_submit

tab.render()
```