Label

The caption for a control, which moves focus to it when clicked and marks it required.

import { Label } from "@glint/components/label.slint";
import { Input } from "@glint/components/input.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 320px;
                spacing: 6px;

                Label {
                    text: "Email Address";
                    clicked => { input.focus(); }
                }

                input := Input {
                    placeholder: "[email protected]";
                }
            }
        }
    }
}

Usage

import { Label, LabelVariant } from "@glint/components/label.slint";
import { Input } from "@glint/components/input.slint";

export component AppWindow inherits Window {
    VerticalLayout {
        alignment: center;

        Label {
            text: "Full Name";
            variant: LabelVariant.required;
            clicked => { name-input.focus(); }
        }

        name-input := Input {
            placeholder: "Enter full name";
        }
    }
}

Label renders an accessible form caption. Wire clicked to focus the associated input or control.

Examples

Label variants

variant configures the caption styling:

LabelVariant.default: Primary foreground text.
LabelVariant.muted: Secondary muted color for optional fields or subtle descriptions.
LabelVariant.required: Appends a destructive red asterisk (*) to the caption.

import { Label, LabelVariant } from "@glint/components/label.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        spacing: 16px;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                spacing: 12px;

                Label {
                    text: "Default Label";
                    variant: LabelVariant.default;
                }

                Label {
                    text: "Muted Helper Label";
                    variant: LabelVariant.muted;
                }

                Label {
                    text: "Required Field";
                    variant: LabelVariant.required;
                }
            }
        }
    }
}

Slotted badges and indicators

The @children slot places badges, icons, or hint chips beside the label caption.

import { Label } from "@glint/components/label.slint";
import { Badge, BadgeVariant } from "@glint/components/badge.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            Label {
                text: "Beta Features";

                Badge {
                    text: "Experimental";
                    variant: BadgeVariant.secondary;
                }
            }
        }
    }
}

Disabled state

Setting disabled: true dims the label and disables click-to-focus triggers.

import { Label } from "@glint/components/label.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            Label {
                text: "Inactive Organization Name";
                disabled: true;
            }
        }
    }
}

API Reference

Properties

Property	Type	Default	Description
`text`	`in string`	no default	The label text.
`variant`	`in LabelVariant`	`LabelVariant.default`	Visual style — `default`, `muted`, `required` (appends an asterisk).
`disabled`	`in bool`	`false`	Follows the control into its disabled state: the caption dims, the click-to-focus association goes quiet, and assistive technology hears that there is nothing to hand the keyboard to. `Field` sets this for the label it owns, so a disabled form row says it once.

Callbacks

Callback	Description
`clicked()`	Fired when the label is clicked; useful for forwarding focus.

Enums

Enum	Values
`LabelVariant`	`default`, `muted`, `required`

Accessibility

Text role. Publishes accessible-role: text with accessible-label: root.text.
Action default. The accessible default action fires clicked(), enabling assistive technology to focus the associated input in the same manner as a pointer click.
Decorative asterisk. The required indicator is marked accessible-role: none so screen readers do not redundantly read decorative punctuation.