KwikOutlinedPhoneNumberField

fun KwikOutlinedPhoneNumberField(modifier: Modifier = Modifier, value: MutableState<TextFieldValue>, onValueChange: (TextFieldValue) -> Unit, onKeyboardDone: () -> Unit = { }, label: String? = null, shape: Shape = MaterialTheme.shapes.medium, isError: Boolean = false, error: String = "", singleLine: Boolean = true, maxLines: Int = 1, imeAction: ImeAction = ImeAction.Done, initialCountryInfo: KwikCountryInfo, isValid: Boolean = false, enabled: Boolean = true, countrySelectable: Boolean = true, colors: TextFieldColors = kwikOutlinedTextFieldColors(enabled), onCountrySelected: (KwikCountryInfo) -> Unit = {}, countryPickerTitle: String = "Where are you from?", showFlags: Boolean = false, showCountryCode: Boolean = false, showDialingCode: Boolean = true)

A powerful phone number field that allows the user to select a country code from a list of countries. The field is outlined and has a leading icon that shows the selected country code. The field also has a trailing icon that shows a check mark if the phone number is valid.

Parameters

value

The current value of the field

onValueChange

The callback that is called when the value of the field changes

onKeyboardDone

The callback that is called when the keyboard done button is clicked

label

The label of the field

shape

The shape of the field

isError

Whether the field is in an error state

error

The error message to show when the field is in an error state

singleLine

Whether the field should be single line

maxLines

The maximum number of lines the field can have

imeAction

The action that should be performed when the keyboard done button is clicked

initialCountryInfo

The initial country info to show in the field

isValid

Whether the phone number is valid

enabled

Whether the field is enabled

countrySelectable

Whether the country code is selectable

colors

The colors of the field

onCountrySelected

The callback that is called when a country is selected

countryPickerTitle

The title of the country picker dialog

showFlags

Whether to show the flags of the countries in the country picker dropdown button

showCountryCode

Whether to show the country code in the country picker dropdown button

showDialingCode

Whether to show the dialing code in the country picker dropdown button

Example usage:

 val value = remember { mutableStateOf(TextFieldValue("1234567890")) }

KwikOutlinedPhoneNumberField(
value = value,
onValueChange = {
value.value = it
},
onKeyboardDone = {},
placeholder = "Phone number",
initialCountryInfo = countryList.random()
onCountrySelected = {},
isValid = true
)