ClerkPhoneNumberField

A Clerk-styled phone number input field with country selection.

This composable provides a complete phone number input experience with:

• Country selection dropdown with flag icons

• Automatic country detection based on locale

• Phone number formatting based on selected country

• Error state display

• Accessibility support

The component is fully controlled - the value parameter is the single source of truth, and onValueChange is called whenever the user modifies the input. The parent component is responsible for managing the phone number state.

Example usage:

@Composable
fun MyPhoneForm() {
  var phoneNumber by remember { mutableStateOf("") }
  var errorMessage by remember { mutableStateOf<String?>(null) }

  ClerkPhoneNumberField(
    value = phoneNumber,
    onValueChange = { newValue ->
      phoneNumber = newValue
      // Validate and set error if needed
      errorMessage = if (newValue.length < 10) "Invalid phone number" else null
    },
    errorText = errorMessage
  )
}

Parameters