# Postcode

Learn about customisation options for the postcode component.

## Styling

```kotlin
val postcodeComponentConfig = PostcodeComponentConfig(
    isRequired = Boolean,
    maxLength = Int,
    style = PostcodeStyle?,
    validations = PostcodeValidations,
    label = String,
    placeholder = String,
    showTrailingIcon = Boolean,
    showValidIcon = Boolean,
    validIcon = Int,
    invalidIcon = Int,
    showInvalidIcon = Boolean
)
```

| Property | Description |
|  --- | --- |
| `isRequired`Boolean | Whether postcode is required for validation. Defaults to `true`. |
| `maxLength`Int | The maximum length of the postcode. Defaults to `10`. |
| `style`PostcodeStyle? | Postcode styling configuration. |
| `validations`PostcodeValidations | Custom validation messages for postcode validation. |
| `label`String | The display label shown above the postcode field. Defaults to `"Postcode"`. |
| `placeholder`String | The placeholder text shown when no postcode is entered. Defaults to `"Enter your postcode"`. |
| `showTrailingIcon`Boolean | Whether to show a trailing icon. Defaults to `true`. |
| `showValidIcon`Boolean | Whether to show a validation icon when valid. Defaults to `true`. |
| `validIcon`Int | The valid icon resource. |
| `invalidIcon`Int | The invalid icon resource. |
| `showInvalidIcon`Boolean | Whether to show an invalid icon when invalid. Defaults to `true`. |


## Callbacks

```kotlin
data class PostcodeComponentConfig(
    val onChange: (() -> Unit)? = null,
    val onFocus: (() -> Unit)? = null,
    val onBlur: (() -> Unit)? = null,
    val onFocusChange: ((Boolean) -> Unit)? = null,
    val onValidationPassed: ((List<ValidationResult>) -> Unit)? = null,
    val onValidationFailed: ((List<ValidationResult>) -> Unit)? = null,
    val onTriggerFieldValidation: ((ValidationResult) -> Unit)? = null
)
```

| Callback | Description |
|  --- | --- |
| `onChange: (() -> Unit)?` | Event handler for when the postcode value changes. |
| `onFocus: (() -> Unit)?` | Event handler for when the component receives focus. |
| `onBlur: (() -> Unit)?` | Event handler for when the component loses focus. |
| `onFocusChange: ((Boolean) -> Unit)?` | Event handler for when the component's focus state changes. |
| `onValidationPassed: ((List<ValidationResult>) -> Unit)?` | Event handler for when validation passes. |
| `onValidationFailed: ((List<ValidationResult>) -> Unit)?` | Event handler for when validation fails. |
| `onTriggerFieldValidation: ((ValidationResult) -> Unit)?` | Event handler for when field validation is Event handler for individually. |


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

## Example

```kotlin
import com.pxp.checkout.components.postcode.PostcodeComponent
import com.pxp.checkout.components.postcode.PostcodeComponentConfig
import com.pxp.checkout.components.postcode.PostcodeValidations
import com.pxp.checkout.components.postcode.PostcodeStyle

// Optional: Create custom validation messages
val customValidations = PostcodeValidations(
    required = "Postcode is required for shipping",
    invalidLength = "Postcode cannot exceed maximum length"
)

// Optional: Create custom styling
val customStyle = PostcodeStyle(
    colors = PostcodeStyle.ColorStyles(
        borderColor = Color.LightGray,
        focusedBorderColor = Color.Blue,
        errorBorderColor = Color.Red,
        backgroundColor = Color.White,
        textColor = Color.Black,
        placeholderColor = Color.Gray
    ),
    shapes = PostcodeStyle.ShapeStyles(
        borderRadius = 8.dp,
        borderWidth = 1.dp
    ),
    spacingStyles = PostcodeStyle.SpacingStyles(
        padding = 12.dp
    )
)

val config = PostcodeComponentConfig(
    // Basic configuration
    label = "Postal Code",
    placeholder = "e.g., 12345, SW1A 1AA, K1A 0A6",
    isRequired = true,
    maxLength = 10,
    
    // Custom validation messages (optional)
    validations = customValidations,
    
    // Icon configuration
    showTrailingIcon = true,
    showValidIcon = true,
    showInvalidIcon = true,
    validIcon = R.drawable.ic_check_circle,
    invalidIcon = R.drawable.ic_error,
    
    // Custom styling (optional)
    style = customStyle
)

val postcodeComponent = checkout.createComponent<PostcodeComponent, PostcodeComponentConfig>(
    type = ComponentType.POSTCODE,
    config = config
)
```