Skip to content

Text Fields

All variants of TextField, IntField, FloatField and PasswordField: styles, leading and trailing icons, error texts, disabled fields and multi-line text areas, each bound to a state.

Text Fields

package main

import (
	"fmt"
	"strings"
	"time"

	"go.wdy.de/nago/application"
	"go.wdy.de/nago/presentation/core"
	heroOutline "go.wdy.de/nago/presentation/icons/hero/outline"
	. "go.wdy.de/nago/presentation/ui"
	"go.wdy.de/nago/presentation/ui/alert"
	"go.wdy.de/nago/web/vuejs"
)

func main() {
	application.Configure(func(cfg *application.Configurator) {
		cfg.SetApplicationID("de.worldiety.tutorial")
		cfg.Serve(vuejs.Dist())

		cfg.RootView(".", func(wnd core.Window) core.View {
			firstname := core.AutoState[string](wnd)
			basicInput := core.AutoState[string](wnd)
			secret := core.AutoState[string](wnd)
			showAlert := core.AutoState[bool](wnd)
			myIntState := core.AutoState[int64](wnd)
			myFloatState := core.AutoState[float64](wnd)

			// add artificial latency
			time.Sleep(time.Millisecond * 500)

			return VStack(
				VStack(
					alert.Dialog("Achtung", Text(fmt.Sprintf("Deine Eingabe: %v\nsecret: %v\n int-field: %v\n float-field: %v", firstname, secret, myIntState, myFloatState)), showAlert, alert.Ok()),

					// ================================================================ //

					TextField("hello world", firstname.Get()).
						InputValue(firstname).
						Placeholder("Placeholder blib").
						Leading(ImageIcon(heroOutline.UserCircle)).
						FullWidth(),

					TextField("hello world", firstname.Get()).
						InputValue(firstname).
						Placeholder("Placeholder blab").
						Optional(true).
						Leading(ImageIcon(heroOutline.UserCircle)).
						Trailing(ImageIcon(heroOutline.UserCircle)).
						FullWidth(),

					TextField("read-only", firstname.Get()).
						InputValue(firstname).
						Leading(ImageIcon(heroOutline.UserCircle)).
						Trailing(ImageIcon(heroOutline.UserCircle)).
						ReadOnly(true).
						FullWidth(),

					TextField("hello world", firstname.Get()).
						InputValue(firstname).
						Placeholder("Placeholder blub").
						Leading(ImageIcon(heroOutline.UserCircle)).
						Trailing(ImageIcon(heroOutline.UserCircle)).
						ErrorText("this is an error").
						FullWidth(),

					TextField("hello world", firstname.Get()).
						InputValue(firstname).
						Leading(ImageIcon(heroOutline.UserCircle)).
						Trailing(ImageIcon(heroOutline.UserCircle)).
						Disabled(true).
						FullWidth(),

					TextField("filled field", firstname.Get()).
						InputValue(firstname).
						Placeholder("Placeholder blib").
						Trailing(ImageIcon(heroOutline.UserCircle)).
						Style(TextFieldFilled).
						FullWidth(),

					TextField("filled field (read-only)", firstname.Get()).
						InputValue(firstname).
						Placeholder("Placeholder bleb").
						Trailing(ImageIcon(heroOutline.UserCircle)).
						Style(TextFieldFilled).
						ReadOnly(true).
						FullWidth(),

					TextField("filled field (disabled)", firstname.Get()).
						InputValue(firstname).
						Placeholder("Placeholder blib").
						Trailing(ImageIcon(heroOutline.UserCircle)).
						Style(TextFieldFilled).
						FullWidth().
						Disabled(true),

					// ================================================================ //

					// you can re-use the state, but be careful of the effects
					TextField("just numbers", numsOf(firstname.Get())).
						InputValue(firstname).
						KeyboardType(KeyboardInteger).
						Style(TextFieldReduced).
						FullWidth(),

					FloatField("just numbers (float)", myFloatState.Get(), myFloatState).
						KeyboardType(KeyboardFloat).
						Style(TextFieldReduced).
						FullWidth(),

					TextField("just numbers", numsOf(firstname.Get())).
						InputValue(firstname).
						KeyboardType(KeyboardInteger).
						Style(TextFieldReduced).
						ErrorText("this is an error").
						FullWidth(),

					TextField("just numbers", numsOf(firstname.Get())).
						InputValue(firstname).
						KeyboardType(KeyboardInteger).
						Style(TextFieldReduced).
						Disabled(true).
						FullWidth(),

					// ================================================================ //

					TextField("basic text field", basicInput.Get()).
						InputValue(basicInput).
						Style(TextFieldBasic).
						FullWidth(),

					TextField("basic text field", basicInput.Get()).
						InputValue(basicInput).
						Style(TextFieldBasic).
						ErrorText("this is an error").
						FullWidth(),

					TextField("basic text field", basicInput.Get()).
						InputValue(basicInput).
						Style(TextFieldBasic).
						Disabled(true).
						FullWidth(),

					// ================================================================ //

					// learn task: take your time to understand what
					// the difference between value and input value is
					IntField("int-field", 42, myIntState).FullWidth(),
					FloatField("float-field", 42.5, myFloatState).FullWidth(),

					TextField("text area", "hello\nworld").Lines(3).FullWidth(),
					TextField("text area filled", "hello\nworld").Lines(3).FullWidth().Style(TextFieldFilled),
					TextField("text area", "hello\nworld").Lines(3).Disabled(true).FullWidth(),
					TextField("text area", "hello\nworld").Lines(3).ErrorText("this is an error").FullWidth(),
					PrimaryButton(func() {
						showAlert.Set(true)
					}).Title("Check"),

					PasswordField("your secret", secret.Get()).InputValue(secret).FullWidth(),
					PasswordField("your secret filled", secret.Get()).InputValue(secret).FullWidth().Style(TextFieldFilled),
				).
					Gap(L16).
					Padding(Padding{}.Vertical(L32)).
					Frame(Frame{MaxWidth: L880}),
			).
				Frame(Frame{}.MatchScreen())
		})
	}).Run()
}

func numsOf(s string) string {
	var sb strings.Builder
	for _, r := range s {
		if r >= '0' && r <= '9' {
			sb.WriteRune(r)
		}
	}

	return sb.String()
}

View on GitHub ↗ · run it with go run go.wdy.de/nago/example/cmd/tutorial-12-textfield@latest