core-methods/com.mercadopago.sdk.android.coremethods.ui.components.textfield.expirationdate/ExpirationDateTextField

ExpirationDateTextField

@Composable
fun ExpirationDateTextField(modifier: Modifier = Modifier, state: PCIFieldState, onEvent: (ExpirationDateTextFieldEvent) -> Unit, dateFormat: ExpirationDateFormat = ExpirationDateFormat.ShortFormat, enabled: Boolean = true, readOnly: Boolean = false, decorationBox: @Composable (innerTextField: @Composable () -> Unit) -> Unit = @Composable { innerTextField -> innerTextField() }, textStyle: TextStyle = MaterialTheme.typography.bodyLarge, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, cursorBrush: Brush = SolidColor(MaterialTheme.colorScheme.primary))

A PCI-compliant text field component for entering card expiration dates. This component provides a secure input field that handles card expiration dates with automatic formatting and validation.

The component supports both short (MM/YY) and long (MM/YYYY) date formats, automatically formats the input with the appropriate separator, and validates the date against current date and format rules.

Parameters

modifier

Optional modifier for customizing the field's appearance and behavior

state

The PCIFieldState that manages the expiration date input value

onEvent

Callback for handling ExpirationDateTextFieldEvents triggered during input

dateFormat

The format to use for the expiration date (short or long)

enabled

Whether the field is enabled for input

readOnly

Whether the field is read-only (can be focused but not edited)

decorationBox

Composable for customizing the field's visual appearance

textStyle

Style configuration for the field's typography

keyboardOptions

Configuration for the software keyboard

cursorBrush

Brush for painting the text cursor

See also

Samples

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.mercadopago.sdk.android.core.sample.Sampled
import com.mercadopago.sdk.android.coremethods.ui.components.textfield.expirationdate.ExpirationDateFormat
import com.mercadopago.sdk.android.coremethods.ui.components.textfield.expirationdate.ExpirationDateTextField
import com.mercadopago.sdk.android.coremethods.ui.components.textfield.pcitextfield.PCIFieldState
import com.mercadopago.sdk.android.coremethods.ui.components.textfield.pcitextfield.rememberPCIFieldState

fun main() { 
   //sampleStart 
   // Adding a decoration in the component with custom mask
// Create a PCIFieldState to use in input
val state: PCIFieldState = rememberPCIFieldState()
ExpirationDateTextField(
    state = state,
    onEvent = { _ ->
        // call viewmodel passing the events to handle the calls
    },
    // Pass the current date format
    dateFormat = ExpirationDateFormat.ShortFormat,
    decorationBox = { innerTextField ->
        // Adding the inner text inside a box with a border
        Box(
            modifier = Modifier.border(
                width = 2.dp,
                color = Color.Black,
                shape = RoundedCornerShape(10.dp),
            ),
        ) {
            // Don`t forget to call the innerTextField()
            innerTextField()
        }
    },
) 
   //sampleEnd
}