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	callback	The root grid pairs label text with feedback actions above the control.
label	callback	The label moves between visible grid text and screen-reader-only text when hidden.
feedback	callback	The feedback slot sits at the row end for help, required, warning, and invalid affordances.
control	callback	The control slot spans the full second row unless the label is hidden.
required	3 classes	The required marker uses destructive status color.

root

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

Callback:

({ 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

label

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

Callback:

({ 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,
                    "!text-maroon-600 dark:!text-maroon-500": invalid,
                };
            }

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

feedback

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

Callback:

({ 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:47

control

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

Callback:

({ 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:54

required

The required marker uses destructive status color.

Default classes:

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

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