Skip to content
Documentation
Components
Basic
Text Field

Text Field

A text field lets the user enter text. It has a label, an optional supporting text, an error text and leading or trailing views like icons. Bind it to a *core.State[string] with InputValue; the state is updated while the user types, debounced by 500ms by default. Set Lines for a multi-line text area. IntField and FloatField are text fields for numbers which bind to an int64 or float64 state.

Text Field

name := core.AutoState[string](wnd)
age := core.AutoState[int64](wnd).Init(func() int64 { return 42 })

VStack(
	TextField("Name", "").
		InputValue(name).
		SupportingText("Your full name").
		Frame(Frame{Width: L320}),
	TextField("Search", "").
		Leading(ImageIcon(icons.MagnifyingGlass)).
		Placeholder("Find anything").
		Frame(Frame{Width: L320}),
	IntField("Age", age.Get(), age).
		Frame(Frame{Width: L320}),
	TextField("Email", "nago@").
		ErrorText("This is not a valid email address.").
		Frame(Frame{Width: L320}),
).Alignment(Leading).Gap(L16)

Constructors

ConstructorDescription
func TextField(label string, value string) TTextFieldCreates a single-line text field with the given label and initial value.
func IntField(label string, value int64, state *core.State[int64]) TTextFieldCreates a text field for integers bound to the given state.
func FloatField(label string, value float64, state *core.State[float64]) TTextFieldCreates a text field for floats bound to the given state.
func FloatFieldValue[T ~float64 | ~float32](label string, value T) TTextFieldCreates a text field which only displays a float value without state.

Keyboard hints for number fields are no guarantee; the user may still type other characters, which are ignored.

Methods

Some setters return DecoredView instead of TTextField. Call them last in the chain.

MethodDescription
AccessibilityLabel(label string) DecoredViewAccessibilityLabel is a placeholder implementation and has no effect yet.
Autocomplete(tags string) TTextFieldAutocomplete defines the autocomplete tags of the input.
Border(border Border) DecoredViewBorder is a placeholder implementation and has no effect yet.
ClearButton(clearButton bool) TTextFieldClearButton defines whether the text field should show a clear button.
Debounce(enabled bool) TTextFieldDebounce is enabled by default.
DebounceTime(d time.Duration) TTextFieldDebounceTime sets a custom debouncing time when entering text.
Disabled(disabled bool) TTextFieldDisabled disables or enables the field.
ErrorText(text string) TTextFieldErrorText sets an error message for the field.
Frame(frame Frame) DecoredViewFrame sets the layout frame of the field (size, width, height, etc.).
FullWidth() TTextFieldFullWidth expands the text field to take the full available width.
ID(id string) TTextFieldID assigns a unique identifier to the text field.
InputValue(input *core.State[string]) TTextFieldInputValue binds the text field to a reactive state.
KeyboardOptions(options TKeyboardOptions) TTextFieldKeyboardOptions sets advanced keyboard behavior (type, capitalization, return key, etc.).
KeyboardType(keyboardType KeyboardType) TTextFieldKeyboardType sets the type of keyboard to display (e.g., text, number, email).
KeydownEnter(fn func()) TTextFieldKeydownEnter currently only works for one line text fields (lines=0) and not for text area.
Label(label string)Label sets the label text of the field. It returns nothing and has no effect, use the constructor instead.
Leading(v core.View) TTextFieldLeading sets a leading view for the field.
Lines(lines int) TTextFieldLines are by default at 0 and enforces a single line text field.
Max(max float64) TTextFieldMax defines the max value of number fields.
Min(min float64) TTextFieldMin defines the min value of number fields.
Optional(optional bool) TTextFieldOptional defines whether the text field is optional.
Padding(padding Padding) DecoredViewPadding sets the input field’s padding.
Placeholder(placeholder string) TTextFieldPlaceholder sets the input’s placeholder text.
ShowZero(showZero bool) TTextFieldShowZero defines wheter the ‘0’ character should be displayed for empty/zero values in number fields.
SizeByContent(sizeByContent bool) TTextFieldSizeByContent sizes the input field (or text area) by its content, using the CSS property field-sizing: content.
Step(step int) TTextFieldStep defines the step size to increase/decrease number values stepwise.
Style(s TextFieldStyle) TTextFieldStyle sets the wanted style.
SupportingText(text string) TTextFieldSupportingText sets helper text for the field.
TextAlignment(v TextAlignment) TTextFieldSets the alignment of the entered text.
Trailing(v core.View) TTextFieldTrailing sets a trailing view for the field.
Value(value string) TTextFieldValue sets a static text value for the field.
Visible(v bool) DecoredViewVisible toggles the visibility of the text field.
WithFrame(fn func(Frame) Frame) DecoredViewWithFrame updates the current frame of the field via a transformation function.

Related