Skip to main content
These modifiers tune the behavior of TextField, SecureField, and TextEditor. keyboardType and submitLabel adjust the on-screen keyboard; textFieldStyle sets the visual chrome; autocorrectionDisabled turns off autocorrect; onSubmit handles Return-key submission; focused binds programmatic focus. These have no effect on non-input components. For multi-field forms, combine submitLabel("next") with focused to drive focus through fields as the user submits.

​
keyboardType

Sets the keyboard type for text input fields. 
.keyboardType(type: "default" | "asciiCapable" | "numbersAndPunctuation" | "URL" | "numberPad" | "phonePad" | "namePhonePad" | "emailAddress" | "decimalPad" | "twitter" | "webSearch" | "asciiCapableNumberPad"): Component
​
type
string
required
The keyboard type to display. Options:
  • "default" — standard keyboard
  • "asciiCapable" — ASCII-only keyboard
  • "numbersAndPunctuation" — numbers and punctuation
  • "URL" — optimized for URL entry
  • "numberPad" — numeric keypad (0-9)
  • "phonePad" — phone number pad
  • "namePhonePad" — name and phone number
  • "emailAddress" — optimized for email entry
  • "decimalPad" — numbers with decimal point
  • "twitter" — optimized for Twitter/social (includes @ and #)
  • "webSearch" — optimized for web search
  • "asciiCapableNumberPad" — ASCII-capable numeric keypad
Email input 
const body = () => {
    const [email, setEmail] = useState("")

    return TextField({ text: email, setText: setEmail })
        .keyboardType("emailAddress")
}
Numeric input 
const body = () => {
    const [amount, setAmount] = useState("")

    return TextField({ text: amount, setText: setAmount })
        .keyboardType("decimalPad")
}
URL input 
const body = () => {
    const [url, setUrl] = useState("")

    return TextField({ text: url, setText: setUrl })
        .keyboardType("URL")
}
This modifier only affects TextField and TextEditor components. It has no effect on non-input components. The keyboard type is a hint to the system — the actual keyboard displayed may vary by platform and locale.

​
textFieldStyle

Sets the visual style for a TextField. 
.textFieldStyle(style: "roundedBorder" | "plain" | "automatic"): Component
​
style
"roundedBorder" | "plain" | "automatic"
required
The text field style:
  • "roundedBorder" — displays a rounded border around the field
  • "plain" — no visible border or background
  • "automatic" — uses the platform default style
Rounded border style 
const body = () => {
    const [name, setName] = useState("")
    return TextField("Name", { text: name, setText: setName })
        .textFieldStyle("roundedBorder")
}
Plain style 
const body = () => {
    const [query, setQuery] = useState("")
    return TextField("Search", { text: query, setText: setQuery })
        .textFieldStyle("plain")
}
Form with styled fields 
const body = () => {
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")
    return VStack({ spacing: 12 }, [
        TextField("Email", { text: email, setText: setEmail })
            .textFieldStyle("roundedBorder")
            .keyboardType("emailAddress"),
        SecureField("Password", { text: password, setText: setPassword })
            .textFieldStyle("roundedBorder"),
    ]).padding(16)
}

​
submitLabel

Sets the keyboard return key label for text input fields. 
.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
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"),
    ])
}

​
autocorrectionDisabled

Disables autocorrection for text input fields. 
.autocorrectionDisabled(isDisabled?: boolean)
​
isDisabled
boolean
default:"true"
Whether autocorrection is disabled. Defaults to true.
Disable autocorrection on a username field 
const body = () => {
    const [username, setUsername] = useState("")
    return TextField({ text: username, setText: setUsername })
        .autocorrectionDisabled()
}
Conditionally disable autocorrection 
const body = () => {
    const [text, setText] = useState("")
    return TextField({ text, setText })
        .autocorrectionDisabled(isCodeInput)
}

​
onSubmit

Runs an action when the user submits a text field. 
.onSubmit(action: () => void): Component
​
action
() => void
required
A callback that runs when the user submits the text field (e.g., presses the Return key).
Submitting a search 
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
            })
    ])
}
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”).

​
focused

Binds focus state for programmatic focus control of text input fields. 
.focused(props: { isFocused: boolean; setIsFocused: (value: boolean) => void })
​
props
object
required
Auto-focus a text field 
const body = () => {
    const [text, setText] = useState("")
    const [focused, setFocused] = useState(true)
    return TextField({ text, setText })
        .focused({ isFocused: focused, setIsFocused: setFocused })
}
Focus on button tap 
const body = () => {
    const [query, setQuery] = useState("")
    const [isFocused, setIsFocused] = useState(false)
    return VStack([
        TextField({ text: query, setText: setQuery })
            .focused({
                isFocused: isFocused,
                setIsFocused: setIsFocused
            }),
        Button("Search", () => setIsFocused(true))
    ])
}

​
See also