> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hyperwisor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# The General Tab

> The General tab in depth — Basic (title, ID, type, visibility), the per-widget content/behavior, and Layout (position, size).

The **General** tab is the first of a widget's four tabs, and the one you touch on
every widget. It has a **fixed skeleton** — the same shape for every widget, so
once you know it, you know it everywhere:

```
General tab
├── Basic          ← always first: Title · ID · Type · Visible
├── (widget's own) ← Content & Behavior — varies per widget
└── Layout         ← always last: Position · Size
```

Basic is always at the top and Layout always at the bottom; only the middle
changes from one widget to the next. That predictability is the point.

## Basic

The identity of the widget. Present on every widget.

### Widget Title

A human-readable name for the widget (copyable). It's for *you* — organizing and
recognizing widgets in the designer. It is **not** the binding key.

### Widget ID

The most important field on the tab. The **widget ID** is how everything else
addresses this widget:

* Firmware pushes values to it — `device.updateWidget(targetId, "myWidgetId", value)`
* The [core loop](/learn/how-it-works) is built on it
* It's copyable, so you can paste the exact ID into firmware

```
e.g.  tempGauge   ·   my_button_1   ·   relaySwitch
```

<Warning>
  Pick a clear ID and keep it stable. Change it after firmware ships and the device
  will push to an ID no widget listens to — the widget goes silent. Treat the ID as
  a contract between the dashboard and the device.
</Warning>

<Tip>
  Use IDs you can type from memory in firmware — short, descriptive, no spaces
  (`pumpSwitch`, not `Pump Switch 1`).
</Tip>

### Widget Type

Read-only — the kind of widget this is (`button`, `gauge`, `slider`, …), copyable
for reference. You can't change a widget's type here; add a different widget
instead.

### Visible

A toggle for whether the widget shows on the dashboard. Hide a widget without
deleting it — useful for work-in-progress, or to reveal it later from a
[script](/script/widgets-api#visibility) or a [trigger](/dashboard/triggers).

## Content & Behavior (per widget)

The middle of the General tab is the widget's **functional** options — what it
shows and how it behaves. This is the part that changes per widget. Style
(colors, fonts, borders) lives in the [Style tab](/dashboard/overview); this
section is about *function*, not looks.

Typical content/behavior options by widget:

| Widget                   | General options here                                                |
| ------------------------ | ------------------------------------------------------------------- |
| **Slider**               | Default value · min · max · step                                    |
| **Switch**               | Initial state (ON/OFF) · state labels                               |
| **Text Input**           | Input type · placeholder · default · max length · pattern · options |
| **Gauge**                | Value range · thresholds                                            |
| **Button**               | Label / pressed text · icon                                         |
| **Form / Database Form** | The fields, their IDs, types, and validation                        |
| **Countdown Timer**      | Initial duration · auto-start                                       |
| **Label**                | Text / bound value                                                  |

<Note>
  The full option list for each widget lives in the
  [Widget Reference](/dashboard/widgets/overview). This section is where those
  functional settings appear in the tab; the reference documents each one.
</Note>

## Layout

Always at the bottom — where the widget sits and how big it is.

### Position

* **X** — horizontal position on the canvas
* **Y** — vertical position

### Size

* **Width**
* **Height**

Set these numerically for pixel-precise placement, or drag/resize on the canvas —
the fields and the canvas stay in sync. (Pixel-level styling — padding, borders,
transforms — lives in the [Style tab](/dashboard/overview).)

## How the tabs fit together

| Tab          | This widget's…                                                    |
| ------------ | ----------------------------------------------------------------- |
| **General**  | identity (ID), function, and placement                            |
| **Style**    | appearance — colors, fonts, borders, effects                      |
| **Triggers** | what it does — [event → command](/dashboard/triggers)             |
| **Data**     | what it reads — [binding to device data](/dashboard/binding-data) |

<CardGroup cols={2}>
  <Card title="Binding by widget ID" icon="diagram-project" href="/dashboard/binding-data">
    How the ID connects to device data.
  </Card>

  <Card title="Triggers" icon="bolt" href="/dashboard/triggers">
    Make the widget send commands.
  </Card>
</CardGroup>