Marco Eidinger
Swifty Tech by Marco Eidinger

Swifty Tech by Marco Eidinger

KeyboardTypes in SwiftUI

Photo by freestocks on Unsplash

KeyboardTypes in SwiftUI

Marco Eidinger's photo
Marco Eidinger
·May 23, 2022·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Table of contents

  • Keyboard Types
  • Custom Keyboard

This blog post will show you the different iOS keyboard types (screenshots) and how to apply them to SwiftUI views.

I will also share a project that can help you build custom keyboard extensions with SwiftUI.

Keyboard Types

Apple provides 12 types of the iOS keyboard with the enum UIKeyboardType in the UIKit framework.

All of these specialized keyboard types are available in SwiftUI and can be applied to through an existing extension on View. Example:

TextField("someone@example.com", text: $emailAddress)
  .keyboardType(.emailAddress)

This extension is available for iOS and tvOS since 13.0.

extension View {
    @available(iOS 13.0, tvOS 13.0, *)
    @available(macOS, unavailable)
    @available(watchOS, unavailable)
    public func keyboardType(_ type: UIKeyboardType) -> some View

}

Default

Specifies the default keyboard for the current input method.

.keyboardType(.default)

default.png

ASCII Capable

Specifies a keyboard that displays standard ASCII characters.

.keyboardType(.asciiCapable)

asci.png

Numbers And Punctuation

Specifies the numbers and punctuation keyboard.

.keyboardType(.numbersAndPunctuation)

numbersPunc.png

URL

This keyboard type prominently features the period (“.”) and slash (“/”) characters and the “.com” string.

.keyboardType(.URL)

url.png

Numbers Pad

This keyboard type prominently features the numbers 0 through 9. This keyboard type does not support auto-capitalization.

.keyboardType(.numberPad)

numberpad.png

Phone Pad

This keyboard type prominently features the numbers 0 through 9 and the “*” and “#” characters. This keyboard type does not support auto-capitalization.

.keyboardType(.alphabet)

phonepad.png

Name Phone Pad

Specifies a keypad for entering a person’s name or phone number. This keyboard type does not support auto-capitalization.

.keyboardType(.namePhonePad)

namephonepad.png

Email Address

This keyboard type prominently features the at (“@”), period (“.”) and space characters.

.keyboardType(.emailAddress)

email.png

Decimal Pad

Specifies a keyboard with numbers and a decimal point.

.keyboardType(.decimalPad)

decimalPad.png

Twitter

Specifies a keyboard for Twitter text entry, with easy access to the at (“@”) and hash (“#”) characters.

.keyboardType(.twitter)

twitter.png

WebSearch

This keyboard type prominently features the space and period (“.”) characters.

.keyboardType(.webSearch)

websearch.png

ASCII Capable Number Pad

Specifies a number pad that outputs only ASCII digits.

.keyboardType(.asciiCapableNumberPad)

asciicapblenumberpad.png

Alphabet

Use UIKeyboardType.asciiCapable instead.

.keyboardType(.alphabet)

alphabet.png

Custom Keyboard

If you are interested in building your custom keyboard extension, you should look if `KeyboardKit can help you. This project is brought to you by Daniel Saidi.

KeyboardKit helps you build custom keyboard extensions with Swift and SwiftUI. It extends the native keyboard APIs and provides you with a lot more functionality than is otherwise available.

The end result can look something like this...or entirely different:

KeyboardKit Demo

Did you find this article valuable?

Support Marco Eidinger by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this