Text field

A text field is a widget that a user can enter text in (core.TextField). Text fields come with powerful selection, navigation, and editing functionality built in, including undo and redo, copy and paste, and word-based navigation, selection, and deletion.

Text fields should mainly be used for relatively short and simple text. For more advanced use cases such as code editing, use a text editor. For numeric input, use a spinner.

Properties

You can make a text field without any custom options:

core.NewTextField(b)

You can set the placeholder of a text field and add label text before it:

core.NewText(b).SetText("Name:")
core.NewTextField(b).SetPlaceholder("Jane Doe")

You can set the text of a text field:

core.NewTextField(b).SetText("Hello, world!")

Text field content can overflow onto multiple lines:

core.NewTextField(b).SetText("This is a long sentence that demonstrates how text field content can overflow onto multiple lines")

You can make a text field outlined instead of filled:

core.NewTextField(b).SetType(core.TextFieldOutlined)

You can make a text field designed for password input:

core.NewTextField(b).SetTypePassword()

You can add a clear button to a text field:

core.NewTextField(b).AddClearButton()

You can set any custom leading and trailing icons you want:

core.NewTextField(b).SetLeadingIcon(icons.Euro).SetTrailingIcon(icons.OpenInNew, func(e events.Event) {
    core.MessageSnackbar(b, "Opening shopping cart")
})

Events

You can add a validation function that ensures the value of a text field is valid when a user changes it:

tf := core.NewTextField(b)
tf.SetValidator(func() error {
    if !strings.Contains(tf.Text(), "Go") {
        return errors.New("Must contain Go")
    }
    return nil
})

You can detect when the user changes the content of a text field and then exits it:

tf := core.NewTextField(b)
tf.OnChange(func(e events.Event) {
    core.MessageSnackbar(b, "OnChange: "+tf.Text())
})

You can detect when the user makes any changes to the content of a text field as they type (input):

tf := core.NewTextField(b)
tf.OnInput(func(e events.Event) {
    core.MessageSnackbar(b, "OnInput: "+tf.Text())
})

Styles

You can change the font size of a text field:

tf := core.NewTextField(b).AddClearButton().SetText("Big text")
tf.Styler(func(s *styles.Style) {
    s.Font.Size.Dp(30)
})

You can change the icon size of a text field:

tf := core.NewTextField(b).AddClearButton().SetText("Big icon")
tf.Styler(func(s *styles.Style) {
    s.IconSize.Set(units.Dp(30))
    s.Min.Y.Dp(30)
})

Other text styles like font weight also work on a text field:

tf := core.NewTextField(b).SetText("Bold and italic text")
tf.Styler(func(s *styles.Style) {
    s.Font.Weight = rich.Bold
    s.Font.Slant = rich.Italic
})