TextInput

export component Example inherits Window {
    width: 270px;
    height: 100px;

    TextInput {
        text: "Replace me with a name";
    }
}

slint

The TextInput is a lower-level item that shows text and allows entering text.

When not part of a layout, its width or height defaults to 100% of the parent element when not specified.

Properties

color

brush default: depends on the style

The color of the text.

font-family

string default: ""

The name of the font family selected for rendering the text.

font-size

length default: 0px

The font size of the text.

font-weight

int default: 0

The weight of the font. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.

font-italic

bool default: false

Whether or not the font face should be drawn italicized or not.

font-metrics

struct FontMetrics default: a struct with all default values

FontMetrics

A structure to hold metrics of a font for a specified pixel size.

• ascent (length): The distance between the baseline and the top of the tallest glyph in the font.
• descent (length): The distance between the baseline and the bottom of the tallest glyph in the font. This is usually negative.
• x_height (length): The distance between the baseline and the horizontal midpoint of the tallest glyph in the font, or zero if not specified by the font.
• cap_height (length): The distance between the baseline and the top of a regular upper-case glyph in the font, or zero if not specified by the font.

The design metrics of the font scaled to the font pixel size used by the element.

has-focus

bool (out) default: false

TextInput sets this to true when it’s focused. Only then it receives KeyEvents.

horizontal-alignment

enum TextHorizontalAlignment default: the first enum value

TextHorizontalAlignment

This enum describes the different types of alignment of text along the horizontal axis of a Text element.

• left: The text will be aligned with the left edge of the containing box.
• center: The text will be horizontally centered within the containing box.
• right: The text will be aligned to the right of the containing box.

The horizontal alignment of the text.

input-type

enum InputType default: text

InputType

This enum is used to define the type of the input field.

• text: The default value. This will render all characters normally
• password: This will render all characters with a character that defaults to ”*”
• number: This will only accept and render number characters (0-9)
• decimal: This will accept and render characters if it’s valid part of a decimal

Use this to configure TextInput for editing special input, such as password fields.

letter-spacing

length default: 0

The letter spacing allows changing the spacing between the glyphs. A positive value increases the spacing and a negative value decreases the distance.

page-height

length default: 0px

The height of the page used to compute how much to scroll when the user presses page up or page down.

read-only

bool default: false

When set to true, text editing via keyboard and mouse is disabled but selecting text is still enabled as well as editing text programmatically.

selection-background-color

color default: a transparent color

The background color of the selection.

selection-foreground-color

color default: a transparent color

The foreground color of the selection.

single-line

bool default: true

When set to true, the text is always rendered as a single line, regardless of new line separators in the text.

text-cursor-width

length default: provided at run-time by the selected widget style

The width of the text cursor.

text

string default: ""

The text rendered and editable by the user.

vertical-alignment

enum TextVerticalAlignment default: the first enum value

TextVerticalAlignment

This enum describes the different types of alignment of text along the vertical axis of a Text element.

• top: The text will be aligned to the top of the containing box.
• center: The text will be vertically centered within the containing box.
• bottom: The text will be aligned to the bottom of the containing box.

The vertical alignment of the text.

wrap

enum TextWrap default: no-wrap

TextWrap

This enum describes the how the text wrap if it is too wide to fit in the Text width.

• no-wrap: The text won’t wrap, but instead will overflow.
• word-wrap: The text will be wrapped at word boundaries if possible, or at any location for very long words.
• char-wrap: The text will be wrapped at any character. Currently only supported by the Qt and Software renderers.

The way the text input wraps. Only makes sense when single-line is false.

Functions

focus()

Call this function to focus the text input and make it receive future keyboard events.

clear-focus()

Call this function to remove keyboard focus from this TextInput if it currently has the focus. See also FocusHandling.

set-selection-offsets(int, int)

Selects the text between two UTF-8 offsets.

select-all()

Selects all text.

clear-selection()

Clears the selection.

copy()

Copies the selected text to the clipboard.

cut()

Copies the selected text to the clipboard and removes it from the editable area.

paste()

Pastes the text content of the clipboard at the cursor position.

Callbacks

accepted()

Invoked when the enter key is pressed.

cursor-position-changed(Point)

The cursor was moved to the new (x, y) position described by the Point argument.

edited()

Invoked when the text has changed because the user modified it.

key-pressed(KeyEvent) -> EventResult

Invoked when a key is pressed, the argument is a KeyEvent struct. Use this callback to handle keys before TextInput does. Return accept to indicate that you’ve handled the event, or return reject to let TextInput handle it.

key-released(KeyEvent) -> EventResult

Invoked when a key is released, the argument is a KeyEvent struct. Use this callback to handle keys before TextInput does. Return accept to indicate that you’ve handled the event, or return reject to let TextInput handle it.

Accessibility

By default, TextInput elements have the following accessibility properties set:

• accessible-role: text-input;
• accessible-value: text;
• accessible-enabled: enabled;
• accessible-read-only: read-only;