Skip to main content

TextInput

A single line of editable text.

Introduced in Kontakt 8.4.

component TextInput
import { TextInput } from ui

export component Main {
    text: String = "Edit me"

    TextInput(self.$text)
}

export var main = Main()
info

The TextInput only offers the text, cursor and selection. Combine it with other modifiers and components to create a styled text field.

Constructors​

With Binding​

This constructor makes use of a binding, which means your state immediately reflects any edits the user makes.

(
    _ text: $<String>,
    read_only: Bool = false,
    color: Color? = nil, // inherited from environment, if set to nil
    selection_color: Color? = nil, // inherited from environment, if set to nil
    selected_text_color: Color? = nil, // inherited from environment, if set to nil
    size: Int? = nil, // inherited from environment, if set to nil
    font_family: FontFamilyName? = nil, // inherited from environment, if set to nil
    italic: Bool = false,
    font_weight: Int = font_weights.normal,
    alignment: HorizontalAlignment = HorizontalAlignment.left,
    on_focus_changed: (Bool) -> (),
    on_editing_finished: () -> (),
    on_submitted: () -> (),
)

_ text: $<String>​

The editable text.

read_only: Bool = false​

Controls whether the text can be edited.

color: Color? = nil​

The text's color.

info

Inherited from environment, if set to nil. The root environment defines the text color black.

See Color

selection_color: Color? = nil​

The color of the selection box behind the selected text.

info

Inherited from environment, if set to nil. The root environment defines the selection color gray.

selected_text_color: Color? = nil​

The color of the text within the active selection.

info

Inherited from environment, if set to nil. The root environment defines the selected text color black.

size: Int? = nil​

The text's size in pixels.

info

Inherited from environment, if set to nil. The root environment defines the font size 16.

font_family: FontFamilyName? = nil​

The font family.

info

Inherited from environment, if set to nil. The root environment defines the font family Roboto.

See FontFamilyName See load_font

italic: Bool = false​

Enables the italic style.

font_weight: Int = font_weights.normal​

Font weight.

See font_weights

alignment: HorizontalAlignment = HorizontalAlignment.left​

The alignment of the text within the input.

See HorizontalAlignment

on_focus_changed: (Bool) -> () = fun (focussed) ​

Invoked with the focus state when the text input gains or looses focus.

on_editing_finished: () -> () = fun () ​

Invoked when the keyboard focus is moved away from the text input or when the user pressed the enter or return key.

on_submitted: () -> () = fun () ​

Invoked when the user pressed the enter or return key.

Without Binding​

This constructor offers more control over the point at which your state is updated. To update the text state only when the user submits the text, use the on_editing_finished callback. This can be useful when certain actions are expensive and you want to defer them until the user submits.

To achieve the same as the other constructor update your text directly from on_text_edited.

(
    _ text: String,
    read_only: Bool = false,
    color: Color? = nil, // inherited from environment, if set to nil
    selection_color: Color? = nil, // inherited from environment, if set to nil
    selected_text_color: Color? = nil, // inherited from environment, if set to nil
    size: Int? = nil, // inherited from environment, if set to nil
    font_family: FontFamilyName? = nil, // inherited from environment, if set to nil
    italic: Bool = false,
    font_weight: Int = font_weights.normal,
    alignment: HorizontalAlignment = HorizontalAlignment.left,
    on_focus_changed: (Bool) -> (),
    on_editing_finished: (String) -> (),
    on_submitted: (String) -> (),
    on_text_edited: (String) -> (),
)

_ text: String​

The text to display

read_only: Bool = false​

Controls whether the text can be edited.

color: Color? = nil​

The text's color.

info

Inherited from environment, if set to nil. The root environment defines the text color black.

See Color

selection_color: Color? = nil​

The color of the selection box behind the selected text.

info

Inherited from environment, if set to nil. The root environment defines the selection color gray.

selected_text_color: Color? = nil​

The color of the text within the active selection.

info

Inherited from environment, if set to nil. The root environment defines the selected text color black.

size: Int? = nil​

The text's size in pixels.

info

Inherited from environment, if set to nil. The root environment defines the font size 16.

font_family: FontFamilyName? = nil​

The font family.

info

Inherited from environment, if set to nil. The root environment defines the font family Roboto.

See FontFamilyName See load_font

italic: Bool = false​

Enables the italic style.

font_weight: Int = font_weights.normal​

Font weight.

See font_weights

alignment: HorizontalAlignment = HorizontalAlignment.left​

The alignment of the text within the input.

See HorizontalAlignment

on_focus_changed: (Bool) -> () = fun (focussed) ​

Invoked with the focus state when the text input gains or looses focus.

on_editing_finished: (String) -> () = fun (text) ​

Invoked with the edited text when the keyboard focus is moved away from the text input or when the user pressed the enter or return key.

on_submitted: (String) -> () = fun (text) ​

Invoked with the edited text when the user pressed the enter or return key.

on_text_edited: (String) -> () = fun (text) ​

Invoked with the edited text on every edit the user does, e.g. typing, deleting or pasting.

Keyboard Focus​

Tapping into the text input will automatically aquire the keyboard focus. Tapping outside the text input will take away its keyboard focus.

Layout Behavior​

Fills the available horizontal space. Has a fixed height based on the font family & size.