Skip to main content
.submitLabel(label: "done" | "go" | "send" | "join" | "route"
    | "search" | "next" | "continue" | "return"): Component
​
label
string
required
The label displayed on the keyboard’s return key:
  • "done" — indicates completion
  • "go" — navigates to a URL or performs an action
  • "send" — sends a message
  • "join" — joins a group or session
  • "route" — starts navigation
  • "search" — performs a search
  • "next" — moves to the next field
  • "continue" — continues a multi-step process
  • "return" — the default return key

​
Support

​
Usage

​
Search field

const body = () => {
    const [query, setQuery] = useState("")
    return TextField("Search...", { text: query, setText: setQuery })
        .submitLabel("search")
        .onSubmit(() => performSearch(query))
}

​
Chat input

const body = () => {
    const [message, setMessage] = useState("")
    return TextField("Message", { text: message, setText: setMessage })
        .submitLabel("send")
        .onSubmit(() => {
            sendMessage(message)
            setMessage("")
        })
}

​
Multi-field form

const body = () => {
    const [name, setName] = useState("")
    const [email, setEmail] = useState("")
    return VStack([
        TextField("Name", { text: name, setText: setName })
            .submitLabel("next"),
        TextField("Email", { text: email, setText: setEmail })
            .submitLabel("done"),
    ])
}

​
See Also