Input

A single line of text, as plain text, a password or a file path.

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;

    in-out property <string> user-name: "";

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

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 320px;

                Input {
                    placeholder: "Enter full name…";
                    text <=> root.user-name;
                }
            }
        }

        Text {
            text: root.user-name != "" ? "Value: " + root.user-name : "Input is empty";
            color: Tokens.color-muted-foreground;
            font-size: Tokens.typography-body-sm-size;
            horizontal-alignment: center;
        }
    }
}

Usage

import { Input } from "@glint/components/input.slint";

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

    VerticalLayout {
        alignment: center;

        Input {
            placeholder: "[email protected]";
            text <=> root.email;
            edited(new-text) => {
                // handle keystroke
            }
            accepted(committed-text) => {
                // handle enter submission
            }
        }
    }
}

Input provides a single-line text entry field styled with Glint design tokens and interactive focus ring outlines. Keyboard users can type, edit, and press Enter to submit.

Examples

Input variants

The variant property specifies what type of content the field manages:

InputVariant.text: Standard single-line text entry.
InputVariant.password: Obscured text entry rendered as bullet characters.
InputVariant.file: File picker trigger button that fires browse() on click or Enter.

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

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

    in-out property <string> chosen-file: "";

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

        HorizontalLayout {
            alignment: center;

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

                Input {
                    variant: InputVariant.text;
                    placeholder: "Standard text";
                    text: "[email protected]";
                }

                Input {
                    variant: InputVariant.password;
                    placeholder: "Enter password";
                    text: "secret-passphrase";
                }

                Input {
                    variant: InputVariant.file;
                    text <=> root.chosen-file;
                    placeholder: "Select artifact…";
                    browse => {
                        root.chosen-file = "document-export.pdf";
                    }
                }
            }
        }
    }
}

Read-only and disabled states

Set read-only: true to allow focusing, selecting, and copying text without permitting edits. Set enabled: false to dim the input and disable interaction entirely.

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: 12px;

                Input {
                    read-only: true;
                    text: "READONLY-SYSTEM-TOKEN";
                }

                Input {
                    enabled: false;
                    text: "Disabled field content";
                }
            }
        }
    }
}

Validation error state

Set invalid: true to display a destructive error border.

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;

                Input {
                    invalid: true;
                    text: "invalid-email-address";
                }
            }
        }
    }
}

API Reference

Properties

Property	Type	Default	Description
`text`	`in-out string`	no default	Two-way bound to the field contents. In the `file` variant this is the chosen file's name, written by the host after `browse()`.
`variant`	`in InputVariant`	`InputVariant.text`	What the field holds — see `InputVariant`.
`placeholder`	`in string`	`root.picking ? @tr("Choose file…") : ""`	Hint shown when the field is empty. A file field defaults to saying what it is waiting for, since it has no typing to invite.
`enabled`	`in bool`	`true`	When false, the input dims and stops accepting keystrokes.
`read-only`	`in bool`	`false`	When true, the user can focus but not edit.
`auto-focus`	`in bool`	`false`	When true, the input grabs focus on mount.
`invalid`	`in bool`	`false`	When true, paints the border in destructive state. The message that explains the error belongs to the surrounding `Field`.
`has-focus`	`out bool`	no default	Whether the entry currently holds keyboard focus — also whether the focus ring is drawn, which is what makes the ring assertable.

Callbacks

Callback	Description
`edited(string)`	Fired on every keystroke with the current text.
`accepted(string)`	Fired on Enter with the current text. A file field has no text to accept, so there Enter asks for the picker instead.
`browse()`	Fired when the user asks the `file` variant for the picker. Open the platform's dialog and write the chosen file's name back into `text`.

Enums

Enum	Values
`InputVariant`	`text`, `password`, `file`

Accessibility

Text input role. Publishes a single accessible-role: text-input node with accessible-value: root.text.
Read-only vs Disabled. accessible-read-only and accessible-enabled are kept distinct so assistive technology does not announce read-only content as dead.
invalid announces the word “Invalid”. Slint 1.17 publishes no accessible-invalid, so the state rides the description channel ADR-0013 opened: the control’s own description first, then "Invalid" after it. A red border is not the announcement — this is.
Focus ring. Displays a focus ring when focused by keyboard or pointer navigation.