Text input

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

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

"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

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)

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

() => 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 })

object

required

Show props

boolean

required

Whether the component should be focused. Setting this to true moves focus to the component.

(value: boolean) => void

required

A callback invoked when the focus state changes (e.g., when the user taps into or away from the field).

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))
    ])
}

Introduction

Authoring

Components

Components — iOS Extensions

Components — Web Extensions

Modifiers

Modifiers — iOS Extensions

Hooks and Globals

Styles

Types

keyboardType

textFieldStyle

submitLabel

autocorrectionDisabled

onSubmit

focused

See also

​keyboardType

​textFieldStyle

​submitLabel

​autocorrectionDisabled

​onSubmit

​focused

​See also

keyboardType

textFieldStyle

submitLabel

autocorrectionDisabled

onSubmit

focused

See also