Skip to content
QuickGUI

OtpField

A bounded one-time-code editor made from individually styled input cells.

Loading interactive demo…

#Import

Import ui from github.com/egoist/quickgui/go/ui.

import (
	"fmt"
	"github.com/egoist/quickgui/go/native"
	"github.com/egoist/quickgui/go/ui"
)

#Usage

func OtpFieldExample() *ui.Element {
	code, setCode := ui.CreateSignal("")
	field := ui.NewOtpField(ui.OtpFieldRootProps{Value: code, Length: 6, ValidationType: "numeric", OnValueChange: func(next string, _ *native.Event) {
		setCode(next)
	}, OnComplete: func(value string, _ *native.Event) {
		fmt.Println("Complete:", value)
	}})
	inputs := make([]*ui.Element, 0, 6)
	for index := range 6 {
		inputs = append(inputs, field.Input(index))
	}
	return field.Root().Children(inputs)
}

#Anatomy

  • otpField.Root
  • otpField.Input
  • otpField.Separator

#API reference

Expand an entry for its description and complete signature. A dash means no declaration default is documented.

NewOtpField

View source
ui.NewOtpField(props ...OtpFieldRootProps) *OtpFieldComponent

NewOtpField declares a OtpField instance. Optional props provide initial settings.

Reffunc(*native.Node)—

Receives the retained native node after construction. Keep imperative work in event or lifecycle callbacks.

func(*native.Node)
View source
Styleany—

Reusable layout, typography, color, and interaction-state styles. Build with ui.Style() and compose with Merge.

any
View source
ChildrenPartChildren—

Content mounted inside the component. Compound child callbacks run after the parent context exists.

PartChildren
View source
Disabledany—

Prevents activation and exposes the disabled state to accessibility. Compound parts inherit a disabled root.

any
View source
Rolestring—

Accessibility role override. Prefer the component’s built-in semantics.

string
View source
FocusOnPointerany—

Whether a pointer press moves keyboard focus to the control.

any
View source
Groupany—

Names this element as a group for descendant interaction-state styling.

any
View source
AriaLabelany—

Accessible name, especially for icon-only controls or controls without a visible label.

any
View source
TabIndex*float64—

Controls sequential keyboard focus order. Omit to retain the component’s default focus behavior.

*float64
View source
OnClickfunc(*native.Event)—

Called after QuickGUI resolves an activation, including supported keyboard activation.

func(*native.Event)
View source
OnDoubleClickfunc(*native.Event)—

Callback for double click. The signature below lists the event payload.

func(*native.Event)
View source
OnContextMenufunc(*native.Event)—

Callback for context menu. The signature below lists the event payload.

func(*native.Event)
View source
OnPointerfunc(*native.Event)—

Callback for pointer. The signature below lists the event payload.

func(*native.Event)
View source
OnMouseEnterfunc(*native.Event)—

Callback for mouse enter. The signature below lists the event payload.

func(*native.Event)
View source
OnMouseLeavefunc(*native.Event)—

Callback for mouse leave. The signature below lists the event payload.

func(*native.Event)
View source
OnMouseDownfunc(*native.Event)—

Callback for mouse down. The signature below lists the event payload.

func(*native.Event)
View source
OnMouseUpfunc(*native.Event)—

Callback for mouse up. The signature below lists the event payload.

func(*native.Event)
View source
OnKeyDownfunc(*native.Event)—

Callback for key down. The signature below lists the event payload.

func(*native.Event)
View source
OnKeyUpfunc(*native.Event)—

Callback for key up. The signature below lists the event payload.

func(*native.Event)
View source
OnFocusfunc(*native.Event)—

Callback for focus. The signature below lists the event payload.

func(*native.Event)
View source
OnBlurfunc(*native.Event)—

Callback for blur. The signature below lists the event payload.

func(*native.Event)
View source
Valuefunc() string—

The current controlled value. Update application state from the change callback to accept a new value.

func() string
View source
DefaultValuestring—

Initial value for uncontrolled state. Use Value when the application should own subsequent changes.

string
View source
Lengthany—

Number of one-time-code input slots, bounded to twelve.

any
View source
ValidationTypestring—

Validation strategy applied to the field.

string
View source
Mask*bool—

Whether the input conceals its entered value.

*bool
View source
ReadOnlybool—

Preserves the current value while keeping the control available for focus and inspection.

bool
View source
Requiredbool—

Marks the control as required for validation and accessibility.

bool
View source
AutoSubmitstring—

Submits the one-time code after every required cell has a value.

string
View source
OnValueChangefunc(string, *native.Event)—

Reports an accepted value change. Use the callback payload to update controlled state.

func(string, *native.Event)
View source
OnCompletefunc(string, *native.Event)—

Callback for complete. The signature below lists the event payload.

func(string, *native.Event)
View source

OtpField.Disabled

View source
otpField.Disabled(value any) *OtpFieldComponent

Prevents activation and exposes the disabled state to accessibility. Compound parts inherit a disabled root.

OtpField.Value

View source
otpField.Value(value any) *OtpFieldComponent

The current controlled value. Update application state from the change callback to accept a new value.

OtpField.DefaultValue

View source
otpField.DefaultValue(value string) *OtpFieldComponent

Initial value for uncontrolled state. Use Value when the application should own subsequent changes.

OtpField.Length

View source
otpField.Length(value any) *OtpFieldComponent

Number of one-time-code input slots, bounded to twelve.

OtpField.ValidationType

View source
otpField.ValidationType(value string) *OtpFieldComponent

Validation strategy applied to the field.

OtpField.Mask

View source
otpField.Mask(value bool) *OtpFieldComponent

Whether the input conceals its entered value.

OtpField.ReadOnly

View source
otpField.ReadOnly(value bool) *OtpFieldComponent

Preserves the current value while keeping the control available for focus and inspection.

OtpField.Required

View source
otpField.Required(value bool) *OtpFieldComponent

Marks the control as required for validation and accessibility.

OtpField.AutoSubmit

View source
otpField.AutoSubmit(value string) *OtpFieldComponent

Submits the one-time code after every required cell has a value.

OtpField.OnValueChange

View source
otpField.OnValueChange(value func(string, *native.Event)) *OtpFieldComponent

Reports an accepted value change. Use the callback payload to update controlled state.

OtpField.OnComplete

View source
otpField.OnComplete(value func(string, *native.Event)) *OtpFieldComponent

Callback for complete. The signature below lists the event payload.

OtpField.Root

View source
otpField.Root() *Element

Configures root for this part. The declared type and source define the accepted value.

OtpField.Input

View source
otpField.Input(value int, options ...OtpFieldInputProps) *Element

Configures input for this part. The declared type and source define the accepted value.

OtpField.InputWith

View source
otpField.InputWith(props OtpFieldInputProps) *Element

InputWith supplies explicit properties for this part.

Reffunc(*native.Node)—

Receives the retained native node after construction. Keep imperative work in event or lifecycle callbacks.

func(*native.Node)
View source
Styleany—

Reusable layout, typography, color, and interaction-state styles. Build with ui.Style() and compose with Merge.

any
View source
ChildrenPartChildren—

Content mounted inside the component. Compound child callbacks run after the parent context exists.

PartChildren
View source
Disabledany—

Prevents activation and exposes the disabled state to accessibility. Compound parts inherit a disabled root.

any
View source
Rolestring—

Accessibility role override. Prefer the component’s built-in semantics.

string
View source
FocusOnPointerany—

Whether a pointer press moves keyboard focus to the control.

any
View source
Groupany—

Names this element as a group for descendant interaction-state styling.

any
View source
AriaLabelany—

Accessible name, especially for icon-only controls or controls without a visible label.

any
View source
TabIndex*float64—

Controls sequential keyboard focus order. Omit to retain the component’s default focus behavior.

*float64
View source
OnClickfunc(*native.Event)—

Called after QuickGUI resolves an activation, including supported keyboard activation.

func(*native.Event)
View source
OnDoubleClickfunc(*native.Event)—

Callback for double click. The signature below lists the event payload.

func(*native.Event)
View source
OnContextMenufunc(*native.Event)—

Callback for context menu. The signature below lists the event payload.

func(*native.Event)
View source
OnPointerfunc(*native.Event)—

Callback for pointer. The signature below lists the event payload.

func(*native.Event)
View source
OnMouseEnterfunc(*native.Event)—

Callback for mouse enter. The signature below lists the event payload.

func(*native.Event)
View source
OnMouseLeavefunc(*native.Event)—

Callback for mouse leave. The signature below lists the event payload.

func(*native.Event)
View source
OnMouseDownfunc(*native.Event)—

Callback for mouse down. The signature below lists the event payload.

func(*native.Event)
View source
OnMouseUpfunc(*native.Event)—

Callback for mouse up. The signature below lists the event payload.

func(*native.Event)
View source
OnKeyDownfunc(*native.Event)—

Callback for key down. The signature below lists the event payload.

func(*native.Event)
View source
OnKeyUpfunc(*native.Event)—

Callback for key up. The signature below lists the event payload.

func(*native.Event)
View source
OnFocusfunc(*native.Event)—

Callback for focus. The signature below lists the event payload.

func(*native.Event)
View source
OnBlurfunc(*native.Event)—

Callback for blur. The signature below lists the event payload.

func(*native.Event)
View source
Typestring—

Input editing mode for this control.

string
View source
Valueany—

The current controlled value. Update application state from the change callback to accept a new value.

any
View source
Placeholderstring—

Hint displayed while the text value is empty.

string
View source
Multilinebool—

Allows multiple lines in the core text editor.

bool
View source
OnInputfunc(*native.Event)—

Receives edits from the text control. Write the new text into the controlled value.

func(*native.Event)
View source
OnChangefunc(*native.Event)—

Callback for change. The signature below lists the event payload.

func(*native.Event)
View source
OnSubmitfunc(*native.Event)—

Called when the control submits its current value.

func(*native.Event)
View source
Indexint—

Zero-based index associated with this repeated part.

int
View source

OtpField.Separator

View source
otpField.Separator(value int, options ...OtpFieldSeparatorProps) *Element

Configures separator for this part. The declared type and source define the accepted value.

OtpField.SeparatorWith

View source
otpField.SeparatorWith(props OtpFieldSeparatorProps) *Element

SeparatorWith supplies explicit properties for this part.

Reffunc(*native.Node)—

Receives the retained native node after construction. Keep imperative work in event or lifecycle callbacks.

func(*native.Node)
View source
Styleany—

Reusable layout, typography, color, and interaction-state styles. Build with ui.Style() and compose with Merge.

any
View source
ChildrenPartChildren—

Content mounted inside the component. Compound child callbacks run after the parent context exists.

PartChildren
View source
Disabledany—

Prevents activation and exposes the disabled state to accessibility. Compound parts inherit a disabled root.

any
View source
Rolestring—

Accessibility role override. Prefer the component’s built-in semantics.

string
View source
FocusOnPointerany—

Whether a pointer press moves keyboard focus to the control.

any
View source
Groupany—

Names this element as a group for descendant interaction-state styling.

any
View source
AriaLabelany—

Accessible name, especially for icon-only controls or controls without a visible label.

any
View source
TabIndex*float64—

Controls sequential keyboard focus order. Omit to retain the component’s default focus behavior.

*float64
View source
OnClickfunc(*native.Event)—

Called after QuickGUI resolves an activation, including supported keyboard activation.

func(*native.Event)
View source
OnDoubleClickfunc(*native.Event)—

Callback for double click. The signature below lists the event payload.

func(*native.Event)
View source
OnContextMenufunc(*native.Event)—

Callback for context menu. The signature below lists the event payload.

func(*native.Event)
View source
OnPointerfunc(*native.Event)—

Callback for pointer. The signature below lists the event payload.

func(*native.Event)
View source
OnMouseEnterfunc(*native.Event)—

Callback for mouse enter. The signature below lists the event payload.

func(*native.Event)
View source
OnMouseLeavefunc(*native.Event)—

Callback for mouse leave. The signature below lists the event payload.

func(*native.Event)
View source
OnMouseDownfunc(*native.Event)—

Callback for mouse down. The signature below lists the event payload.

func(*native.Event)
View source
OnMouseUpfunc(*native.Event)—

Callback for mouse up. The signature below lists the event payload.

func(*native.Event)
View source
OnKeyDownfunc(*native.Event)—

Callback for key down. The signature below lists the event payload.

func(*native.Event)
View source
OnKeyUpfunc(*native.Event)—

Callback for key up. The signature below lists the event payload.

func(*native.Event)
View source
OnFocusfunc(*native.Event)—

Callback for focus. The signature below lists the event payload.

func(*native.Event)
View source
OnBlurfunc(*native.Event)—

Callback for blur. The signature below lists the event payload.

func(*native.Event)
View source
Index*int—

Zero-based index associated with this repeated part.

*int
View source

Element

View source
part.Child(content).Style(style)

Every part returns a fluent element. Strings, numbers, elements, and deferred child factories compose directly.

ChildChild(child any) *Element—

Child appends content and returns this element. Content can be an element, native node, scalar, accessor, or node-returning construction callback. 

Child(child any) *Element
View source
ChildrenChildren(children ...any) *Element—

Children appends multiple children in order without replacing existing content. It also accepts []any, []*Element, and []*native.Node slices as arguments. Read the retained child nodes through element.Node.Children. 

Children(children ...any) *Element
View source
StyleStyle(style StyleBuilder) *Element—

Style merges a reusable style. Scalar accessors retain independent native bindings. 

Style(style StyleBuilder) *Element
View source
OnClickOnClick(handler func()) *Element—

OnClick handles a click without an unused event parameter. 

OnClick(handler func()) *Element
View source
RefRef(handler func(*native.Node)) *Element—

Ref exposes the native handle once at this point in the declaration chain. 

Ref(handler func(*native.Node)) *Element
View source