---
url: "https://vueda.dev/v3/reference/theming/keys/WidgetLabel.md"
title: "WidgetLabel"
---

# WidgetLabel

Source: `client/lib/theme/vueda-tailwind/widgets/index.js`

> The root grid pairs label text with feedback actions above the control.

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/WidgetLabel.md#theme-key-WidgetLabel-root) | callback | The root grid pairs label text with feedback actions above the control. |
| [label](/v3/reference/theming/keys/WidgetLabel.md#theme-key-WidgetLabel-label) | callback | The label moves between visible grid text and screen-reader-only text when hidden. |
| [feedback](/v3/reference/theming/keys/WidgetLabel.md#theme-key-WidgetLabel-feedback) | callback | The feedback slot sits at the row end for help, required, warning, and invalid affordances. |
| [control](/v3/reference/theming/keys/WidgetLabel.md#theme-key-WidgetLabel-control) | callback | The control slot spans the full second row unless the label is hidden. |
| [required](/v3/reference/theming/keys/WidgetLabel.md#theme-key-WidgetLabel-required) | 3 classes | The required marker uses destructive status color. |

<a id="theme-key-WidgetLabel-root"></a>

## root

> The root grid pairs label text with feedback actions above the control.

Callback:

```javascript
({ isCardLayout, hidden, required, help, warning, invalid }) => {
            const isRequiredHasHelpOrHasValidation = required || help || warning || invalid;
            return {
                class: {
                    "ml-2 mb-1": !isCardLayout,
                    "gap-1": true,
                    // not items-baseline, checkboxes and buttons don't play well with it
                    // nor items-center, cells in the row stretch to fill the row by default
                    "grid grid-cols-[auto_1fr] justify-between": !hidden,
                    "flex flex-row items-baseline": hidden && isRequiredHasHelpOrHasValidation,
                },
            };
        }
```

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetLabel.theme.js:17`

<a id="theme-key-WidgetLabel-label"></a>

## label

> The label moves between visible grid text and screen-reader-only text when hidden.

Callback:

```javascript
({ warning, invalid, hidden, required, help }) => {
                const showingButton = warning || invalid || help || required;
                return {
                    "sr-only": hidden,
                    "row-start-1 row-end-2 col-start-1": !hidden,
                    "col-end-2": !hidden && showingButton,
                    "col-end-3": !hidden && !showingButton,
                    "leading-[2.3958125rem]": true,
                    "text-neutral-900/60 dark:text-white/60": true,
                    "!text-amber-600 dark:!text-amber-500": warning,
                };
            }
```

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetLabel.theme.js:31`

<a id="theme-key-WidgetLabel-feedback"></a>

## feedback

> The feedback slot sits at the row end for help, required, warning, and invalid affordances.

Callback:

```javascript
({ hidden }) => ({
            class: {
                "row-start-1 row-end-2 col-start-2 col-end-3": !hidden,
                "justify-self-end min-w-max": !hidden,
            },
        })
```

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetLabel.theme.js:46`

<a id="theme-key-WidgetLabel-control"></a>

## control

> The control slot spans the full second row unless the label is hidden.

Callback:

```javascript
({ hidden }) => {
            return {
                class: {
                    "row-start-2 row-end-3 col-start-1 col-end-3": !hidden,
                    grow: hidden,
                },
            };
        }
```

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetLabel.theme.js:53`

<a id="theme-key-WidgetLabel-required"></a>

## required

> The required marker uses destructive status color.

Default classes:

```text
text-red-500 dark:text-red-400
ml-1
cursor-help
```

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetLabel.theme.js:62`