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.

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