# Label

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

```slint
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: "you@example.com";
                }
            }
        }
    }
}
```

## Usage

```slint
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.

```slint
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.

```slint
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.

```slint
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.