How to set the inputType for a TextField in Jetpack Compose

Question

I'd like to restrict what the user can type in a TextField in Jetpack Compose. How do I do that?

The equivalent in xml is inputType:

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:inputType="number"
    android:hint="Only numbers please!" />

Cristan · Accepted Answer · 2022-01-21T16:30:52.160

108

Use KeyboardOptions:

TextField(
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)

edited Jan 21 '22 at 16:30

answered Mar 04 '21 at 20:23

Cristan

12,083
7
65
69

5

if {,.-} are not necessary (keyboardType = KeyboardType.NumberPassword) can be used – David Aleksanyan Mar 13 '22 at 15:50
1

If `.` is necessary use `KeyboardType.Decimal` as `Number` doesn't guarantee it – Tom Jan 09 '23 at 22:03

Livin · Answer 2 · 2021-07-20T04:08:10.157

Ty like this KeyboardOptions

var textShopName by remember { mutableStateOf("") } 

OutlinedTextField(
            keyboardOptions = KeyboardOptions(
                capitalization = KeyboardCapitalization.None,
                autoCorrect = true,
                keyboardType = KeyboardType.Number,
                imeAction = ImeAction.Next
            ),
            value = textShopName,
            onValueChange = { textShopName = it },
            label = { Text("Shop Name") },
            modifier = Modifier
                .padding(start = 16.dp, end = 16.dp, top = 20.dp)
                .fillMaxWidth(),

            )

score 3 · Answer 3 · answered Aug 25 '22 at 12:45

3

For Password keyboard type for hiding password you have to set the visualTransformation too

TextField(
 keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
 visualTransformation =  PasswordVisualTransformation(),

answered Aug 25 '22 at 12:45

Manohar

22,116
9
108
144

score 2 · Answer 4 · answered Mar 05 '21 at 09:02

2

You can use something like:

TextField(
        ....,
        keyboardOptions = 
             KeyboardOptions.Default.copy(keyboardType = KeyboardType.Number)
        )

answered Mar 05 '21 at 09:02

Gabriele Mariotti

320,139
94
887
841

What's the advantage of copying the default? – Sergey Nov 13 '21 at 20:55
3

@Sergey The advantage is to override only a single value. – Gabriele Mariotti Nov 14 '21 at 08:06

score 1 · Answer 5 · answered Jan 06 '23 at 12:49

Just to add to the answers above if you want to show numeric keyboard for decimal numbers keep in mind that:

Most keyboards show a decimal separator when keyboard type is set as Number. However, it is possible that a keyboard expects TYPE_NUMBER_FLAG_DECIMAL flag in inputType to actually show a key for decimal separator.

So if you want to show numeric keyboard for decimal numbers in order to avoid corner cases in certain keyboards you should use keyboardType = KeyboardType.Decimal:

TextField(
        ...,
        keyboardOptions = 
             KeyboardOptions(keyboardType = KeyboardType.Decimal)
        ...,    
        )

Inside the Code found `androidx.compose.ui.text.input.KeyboardType` "A keyboard type used to request an IME that is capable of inputting decimals. IME should explicitly provide a decimal separator as input, which is not assured by KeyboardType.Number." — CryptoCode, Jan 28 '23 at 16:56

How to set the inputType for a TextField in Jetpack Compose

5 Answers5

Linked