Skip to main content
.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

Support

Usage

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

Notes

  • 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.

See Also