Skip to content
Glint UI

InputGroup

A text input with things welded to its edges — icons, text, a spinner, a control of your own.

Usage

import { InputGroup } from "@glint/components/input-group.slint";
import { IconSet } from "@lucide";


export component AppWindow inherits Window {
    in-out property <string> url: "";


    VerticalLayout {
        alignment: center;


        InputGroup {
            leading-text: "https://";
            trailing-icon: IconSet.ExternalLink;
            placeholder: "example.com";
            text <=> root.url;
        }
    }
}

InputGroup embeds prefix and suffix adornments (icons, static text labels, spinners, or slotted custom chips) directly inside the shared border and focus ring of a text entry.

Examples

Input group variants

The variant property switches between single-line text, password entry, and a growing multi-line textarea:

  • InputGroupVariant.text: Standard single-line entry.
  • InputGroupVariant.password: Obscured password characters.
  • InputGroupVariant.multi-line: Dynamic multi-line composer that grows with content.

Addon alignments and slotted children

The @children slot accepts custom elements placed according to addon-align:

  • InputGroupAddonAlign.inline-start: Beside the text at the leading edge.
  • InputGroupAddonAlign.inline-end: Beside the text at the trailing edge.
  • InputGroupAddonAlign.block-start: Header band above the text area.
  • InputGroupAddonAlign.block-end: Footer toolbar band below the text area.

Asynchronous loading state

Set loading: true to display an animated spinner in the trailing slot, indicating background validation or asynchronous lookups.

API Reference

Properties

PropertyTypeDefaultDescription
textin-out stringno defaultTwo-way bound to the field contents.
placeholderin stringno defaultHint shown when the field is empty.
enabledin booltrueWhen false, the group dims and stops accepting keystrokes.
read-onlyin boolfalseWhen true, the user can focus but not edit.
variantin InputGroupVariantInputGroupVariant.textWhat the entry holds — see InputGroupVariant. A multi-line group grows with its text, up to the max-height the call site sets; past that the text scrolls and the caret is scrolled back into view, exactly as in Textarea.
invalidin boolfalseWhen true, paints the border in destructive state.
loadingin boolfalseWhile true, a spinner turns in the trailing addon — the async check (a username lookup, an address validation) reported inside the field rather than beside it.
loading-labelin string@tr("Loading")Name of that spinner. Overridable because the group owns the element and a consumer cannot reach it (same reason Button exposes it).
leading-iconin LucideIconno defaultAddon in front of the text — normally an IconSet icon, a prefix, or both.
leading-textin stringno default
trailing-iconin LucideIconno defaultAddon behind the text — a unit suffix, a shortcut hint, or both.
trailing-textin stringno default
addon-alignin InputGroupAddonAlignInputGroupAddonAlign.inline-endWhere @children sit inside the border.
has-focusout boolno defaultWhether the group currently holds keyboard focus — also whether the focus ring is drawn, which is what makes the ring assertable.
scroll-offsetout lengthno defaultHow far the text is scrolled under the group, as a non-positive offset. Zero until a multi-line group has stopped growing at its max-height.

Callbacks

CallbackDescription
edited(string)Fired on every keystroke with the current text.
accepted(string)Fired on Enter with the current text. A multi-line group breaks the line instead, the way any multi-line field does.

Enums

EnumValues
InputGroupVarianttext, password, multi-line
InputGroupAddonAligninline-start, inline-end, block-start, block-end

Accessibility

  • Unified text entry node. Publishes a single accessible-role: text-input node with the current text and placeholder.
  • Contextual adornments. Addon text (like units or URL schemes) remains accessible as supplementary context.
  • invalid announces “Invalid”; loading announces loading-label. The loading label defaults to "Loading", remains overridable and falls back to "Busy" when explicitly empty. Slint 1.17 publishes neither accessible-invalid nor a busy state, so both ride the description channel ADR-0013 opened; when both are present, the loading label is announced before "Invalid".
  • Focus ring. The focus ring envelops all welded addons, giving clear visual indication of active focus.