Skip to main content
.onSubmit(action: () => void): Component
​
action
() => void
required
A callback that runs when the user submits the text field (e.g., presses the Return key).

​
Support

​
Usage

const body = () => {
    const [query, setQuery] = useState("")

    return TextField({ text: query, setText: setQuery })
        .onSubmit(() => {
            console.log("Searching for: " + query)
        })
}

​
Combined with submit label

const body = () => {
    const [text, setText] = useState("")

    return TextField({ text: text, setText: setText })
        .submitLabel("search")
        .onSubmit(() => {
            performSearch(text)
        })
}

​
Moving focus on submit

const body = () => {
    const [name, setName] = useState("")
    const [email, setEmail] = useState("")
    const [emailFocused, setEmailFocused] = useState(false)

    return VStack([
        TextField({ text: name, setText: setName })
            .onSubmit(() => setEmailFocused(true)),
        TextField({ text: email, setText: setEmail })
            .focused({
                isFocused: emailFocused,
                setIsFocused: setEmailFocused
            })
    ])
}

​
Notes

  • The submit action is triggered when the user presses the Return key on the keyboard.
  • Use .submitLabel() to customize the Return key text (e.g., “search”, “done”, “go”).

​
See Also