TextInput (8.4)

A single line of editable text.

component TextInput

Example

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

constructor(_ text: $<String>, read_only: Bool = false, color: Color? = nil, selection_color: Color? = nil, selected_text_color: Color? = nil, size: Int? = nil, font_family: FontFamilyName? = nil, italic: Bool = false, font_weight: Int = font_weights.normal, alignment: HorizontalAlignment = HorizontalAlignment.left, letter_spacing: Float? = nil, on_focus_changed: (Bool) -> () = fun (focused) {}, on_editing_finished: () -> () = fun () {}, on_submitted: () -> () = fun () {})

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

_ text: $<String>

The editable text.

read_only: Bool = false

Controls whether the text can be edited.

color: Color? = nil // nil == inherited from environment

The text's color.

See Color

selection_color: Color? = nil // nil == inherited from environment

The color of the selection box behind the selected text.

selected_text_color: Color? = nil // nil == inherited from environment

The color of the text within the active selection.

size: Int? = nil // nil == inherited from environment

The text's size in pixels.

font_family: FontFamilyName? = nil // nil == inherited from environment

The font family.

See FontFamilyName See load_font

italic: Bool = false

Enables the italic style.

font_weight: Int = font_weights.normal

Font weight.

See font_weights

letter_spacing: Float? = nil // nil == inherited from environment(8.11)

Additional spacing between characters in pixels. Can be negative to tighten character spacing.

See LetterSpacing

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

constructor(_ text: String, read_only: Bool = false, color: Color? = nil, selection_color: Color? = nil, selected_text_color: Color? = nil, size: Int? = nil, font_family: FontFamilyName? = nil, italic: Bool = false, font_weight: Int = font_weights.normal, alignment: HorizontalAlignment = HorizontalAlignment.left, letter_spacing: Float? = nil, on_focus_changed: (Bool) -> () = fun (focused) {}, on_editing_finished: (String) -> () = fun (text) {}, on_submitted: (String) -> () = fun (text) {}, on_text_edited: (String) -> () = fun (text) {})

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

The text to display

read_only: Bool = false

Controls whether the text can be edited.

color: Color? = nil // nil == inherited from environment

The text's color.

See Color

selection_color: Color? = nil // nil == inherited from environment

The color of the selection box behind the selected text.

selected_text_color: Color? = nil // nil == inherited from environment

The color of the text within the active selection.

size: Int? = nil // nil == inherited from environment

The text's size in pixels.

font_family: FontFamilyName? = nil // nil == inherited from environment

The font family.

See FontFamilyName See load_font

italic: Bool = false

Enables the italic style.

font_weight: Int = font_weights.normal

Font weight.

See font_weights

letter_spacing: Float? = nil // nil == inherited from environment(8.11)

Additional spacing between characters in pixels. Can be negative to tighten character spacing.

See LetterSpacing

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.