# Card expiry date

Learn about customisation options for the card expiry date component.

## Styling

```kotlin
val cardExpiryDateComponentConfig = CardExpiryDateComponentConfig(
    label = String,
    validations = CardExpiryDateValidations,
    style = CardExpiryDateStyle?,
    formatOptions = ExpiryDateFormat,
    numberOfMonthExpired = Int?,
    showTrailingIcon = Boolean,
    showTooltip = Boolean,
    showHintIcon = Boolean,
    hintIcon = Int,
    showValidIcon = Boolean,
    validIcon = Int,
    invalidIcon = Int,
    showInvalidIcon = Boolean,
    tooltipData = TooltipData,
    dynamicCardImageComponent = DynamicCardImageComponent?,
    displayRequiredIcon = Boolean?,
    placeholder = String,
    isRequired = Boolean
)
```

| Property | Description |
|  --- | --- |
| `label`String | The input label's text. Defaults to `"Expiry Date". |
| `placeholder`String | The placeholder text showing the expected format (e.g., `MM/YY`). |
| `formatOptions`ExpiryDateFormat | The date format pattern. Defaults to `SHORT_SLASH`. |
| `numberOfMonthExpired`Int? | The grace period for expired cards, in months. |
| `isRequired`Boolean | Whether the expiry date field is required for submission. Defaults to `true`. Can't be overriden. |
| `showTrailingIcon`Boolean | Whether to show a calendar icon. Defaults to `true`. |
| `showValidIcon`Boolean | Whether to show a checkmark when valid. Defaults to `true`. |
| `showInvalidIcon`Boolean | Whether to show an error icon when invalid. Defaults to `true`. |
| `validIcon`Int | The valid state icon resource. |
| `invalidIcon`Int | The invalid state icon resource. |
| `hintIcon`Int | The hint icon resource. |
| `showHintIcon`Boolean | Whether to display a hint icon. Defaults to `false`. |
| `style`CardExpiryDateStyle? | Custom styling configuration. |
| `validations`CardExpiryDateValidations | Custom validation messages. |


## Callbacks

```kotlin
data class CardExpiryDateComponentConfig(
    val onChange: ((ExpiryDateInputEvent) -> Unit)? = null,
    val onFocus: ((ExpiryDateFocusEvent) -> Unit)? = null,
    val onBlur: ((ExpiryDateFocusEvent) -> Unit)? = null,
    val onValidationPassed: ((List<ValidationResult>) -> Unit)? = null,
    val onValidationFailed: ((List<ValidationResult>) -> Unit)? = null,
    val onMonthChanged: ((Int) -> Unit)? = null,
    val onYearChanged: ((Int) -> Unit)? = null,
    val onFormatChange: ((ExpiryFormatEvent) -> Unit)? = null
)
```

| Callback | Description |
|  --- | --- |
| `onChange: (ExpiryDateInputEvent) -> Unit` | Event handler for when the expiry date value changes. |
| `onFocus: (ExpiryDateFocusEvent) -> Unit` | Event handler for when the input receives focus. |
| `onBlur: (ExpiryDateFocusEvent) -> Unit` | Event handler for when the input loses focus. |
| `onValidationPassed: (List<ValidationResult>) -> Unit` | Event handler for when the validation passes. |
| `onValidationFailed: (List<ValidationResult>) -> Unit` | Event handler for when the validation fails. |
| `onMonthChanged: (Int) -> Unit` | Event handler for when a month's value changes |
| `onYearChanged: (Int) -> Unit` | Event handler for when a year's value changes. |
| `onFormatChange: (ExpiryFormatEvent) -> Unit` | Event handler for when the date format changes. |


For more information about callbacks, see [Events](/guides/checkout/components/android/card/events).

## Example

```kotlin
import com.pxp.checkout.components.cardexpirydate.CardExpiryDateValidations

val config = CardExpiryDateComponentConfig(
    label = "Card Expiry Date",
    formatOptions = ExpiryDateFormat.LONG_SLASH,
    numberOfMonthExpired = 6, // 6-month grace period
    showTrailingIcon = true,
    showValidIcon = true,
    showInvalidIcon = true,
    validations = CardExpiryDateValidations(
        required = "Expiry date is required",
        invalidFormat = "Please enter numbers only",
        invalidMonth = "Month must be between 01-12",
        invalidFormatPattern = "Please use MM/YYYY format",
        expired = "Card has expired, please use a valid card"
    ),
    style = customExpiryDateStyle
)

val cardExpiryDateComponent = checkout.createComponent<CardExpiryDateComponent, CardExpiryDateComponentConfig>(
    type = ComponentType.CARD_EXPIRY_DATE,
    config = config
)
```