Exploring Keyboard Types in Kotlin Jetpack Compose

3 min readApr 12, 2023

Kotlin Jetpack Compose is a tool used to design modern user interfaces, and it provides developers with a range of features to create various elements in their applications. One of these features is the keyboard type, which is used to determine the type of keyboard presented to users in elements where user input is required, such as EditText.

Let’s take a look at the different keyboard types that can be used in Jetpack Compose:

Text Keyboard Type: This is the default keyboard type for text input fields. It provides a full QWERTY keyboard with letters, numbers, and symbols.

var textvalue by remember {mutableStateOf(“”)}
TextField(
    value = textValue,
    onValueChange = { textValue = it },
    keyboardOptions = KeyboardOptions.Default,
    label = { Text("Text Keyboard Type") }
)

Number Keyboard Type: This keyboard type is used for numeric input fields. It provides a numeric keypad with numbers, decimal point, and arithmetic operators.

var numberValue by remember {mutableStateOf(“”)}
TextField(
    value = numberValue,
    onValueChange = { numberValue = it },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    label = { Text("Number Keyboard Type") }
)

Phone Keyboard Type: This keyboard type is used for phone number input fields. It provides a numeric keypad with a plus sign, asterisk, and pound sign. It also includes buttons for common phone symbols like the phone icon, microphone icon, and keyboard icon.

var phoneValue by remember {mutableStateOf(“”)}

TextField(
    value = phoneValue,
    onValueChange = { phoneValue = it },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone),
    label = { Text("Phone Keyboard Type") }
)

Email Keyboard Type: This keyboard type is used for email input fields. It provides a keyboard with letters, numbers, and symbols commonly used in email addresses, such as the @ symbol and period.

var emailValue by remember {mutableStateOf(“”)}

TextField(
    value = emailValue,
    onValueChange = { emailValue = it },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email),
    label = { Text("Email Keyboard Type") }
)

Password Keyboard Type: This keyboard type is used for password input fields. It provides a keyboard with letters, numbers, and symbols commonly used in passwords. The keyboard hides the characters as they are typed.

var passwordValue by remember {mutableStateOf(“”)}

TextField(
    value = passwordValue,
    onValueChange = { passwordValue = it },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
    visualTransformation = PasswordVisualTransformation(),
    label = { Text("Password Keyboard Type") }
)

URL Keyboard Type: This keyboard type is used for URL input fields. It provides a keyboard with letters, numbers, and symbols commonly used in URLs, such as the forward slash and period.

var urlValue by remember {mutableStateOf(“”)}

TextField(
    value = urlValue,
    onValueChange = { urlValue = it },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Uri),
    label = { Text("URL Keyboard Type") }
)

These are the different keyboard types available in Jetpack Compose that can be used to enhance user experience in your applications.

Social Network

GitHub: https://github.com/GkhKaya

Linkedin: https://www.linkedin.com/in/gokhan-kaya-10b140249/

If this article contains a visual that violates copyright, please contact: gkhkaya00@gmail.com.

Exploring Keyboard Types in Kotlin Jetpack Compose

Written by Gokhan Kaya