---
url: >-
  https://plugin.stripo.email/extensions/reference/settings-panel/SettingsPanelTab.md
---
# SettingsPanelTab

Configuration class for organizing controls within settings panel tabs.

```typescript
class SettingsPanelTab
```

## Description

`SettingsPanelTab` represents a single tab within a block's settings panel. It defines which controls appear in the tab, their order, and the tab's label. Tabs help organize related controls together, making the settings interface more intuitive and manageable for users.

This class provides a fluent API for configuring tabs, allowing you to dynamically add, remove, and reorder controls as needed.

## Import

```typescript
import { SettingsPanelTab } from '@stripoinc/ui-editor-extensions';
```

## Constructor

```typescript
constructor(tabId: string, controlsIds: string[])
```

### Parameters

| Name | Type | Description |
|------|------|-------------|
| tabId | `string` | Identifier for the tab (e.g., 'settings', 'styles', 'data') |
| controlsIds | `string[]` | Array of control IDs to display in this tab |

### Example

```typescript
const settingsTab = new SettingsPanelTab(SettingsTab.SETTINGS, [
    GeneralControls.TEXT_COLOR,
    'my-padding-control'
]);
```

## Methods

### getTabId()

Returns the identifier of this tab.

```typescript
public getTabId(): string
```

#### Returns

`string` - The tab identifier

***

### getLabel()

Returns the display label for this tab.

```typescript
public getLabel(): string | undefined
```

#### Returns

`string | undefined` - The tab label, or undefined if not set

***

### getControlsIds()

Returns the array of control IDs in this tab.

```typescript
public getControlsIds(): string[]
```

#### Returns

`string[]` - Array of control identifiers

***

### getControls()

:::::tip Version Availability
This method is available starting from v3.8.0
:::::

Returns the normalized control configuration objects in this tab.

```typescript
public getControls(): SettingsPanelTabControl[]
```

#### Returns

[`SettingsPanelTabControl[]`](#settingspaneltabcontrolconfig) - Array of control configuration objects

***

### withLabel()

Sets a custom display label for the tab.

```typescript
public withLabel(label: string): SettingsPanelTab
```

#### Parameters

| Name | Type | Description |
|------|------|-------------|
| label | `string` | The label to display on the tab |

#### Returns

`SettingsPanelTab` - The tab instance for method chaining

#### Example

```typescript
const tab = new SettingsPanelTab('settings', ['color', 'size'])
  .withLabel('Appearance');
```

***

### addControl()

Adds a control to the tab at the specified position.

```typescript
public addControl(
  control: string | SettingsPanelTabControlConfig,
  position: number
): SettingsPanelTab
```

#### Parameters

| Name | Type | Description |
|------|------|-------------|
| control | `string \| SettingsPanelTabControlConfig` | Control ID or control configuration object |
| position | `number` | Position index |

#### Returns

`SettingsPanelTab` - The tab instance for method chaining

#### Position Behavior

* `position < 0`: Adds control at the beginning
* `position > array.length`: Adds control at the end
* `0 <= position <= array.length`: Inserts at specified index

#### Example

```typescript
const tab = new SettingsPanelTab('settings', ['color'])
  .addControl('size', 0)      // Add at beginning: ['size', 'color']
  .addControl(
    {
      id: 'padding',
      class: 'custom-grid-cell',
      withFullHeight: true
    },
    1
  );
```

***

### deleteControl()

Removes a control from the tab.

```typescript
public deleteControl(controlId: string): void
```

#### Parameters

| Name | Type | Description |
|------|------|-------------|
| controlId | `string` | The ID of the control to remove |

#### Usage Notes

* Does nothing if the control ID is not found
* Maintains the order of remaining controls

#### Example

```typescript
const tab = new SettingsPanelTab('settings', ['color', 'size', 'padding']);
tab.deleteControl('size'); // Result: ['color', 'padding']
```

## SettingsPanelTabControlConfig

:::::tip Version Availability
This interface is available starting from v3.8.0
:::::

```typescript
interface SettingsPanelTabControlConfig {
  id: string;
  class?: string;
  withFullHeight?: boolean;
}
```

### Properties

| Property | Type | Description |
|----------|------|-------------|
| `id` | `string` | Control identifier |
| `class` | `string` | Optional CSS class applied by the editor layout |
| `withFullHeight` | `boolean` | Expands the control to full available tab height when supported |