Postcode

Learn about customisation options for the postcode component.

Styling

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

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.

Example

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
)

Postcode

Styling

Callbacks

Example

Was this helpful?